推廣 熱搜: WEB前端教程  雅思培訓班  雅思培訓 

WEB前端教程:03Form表單

   日期:2019-04-21     瀏覽:334    
核心提示:form表單之前學習的標簽更多的是向用戶展示信息,假如服務器端需要驗證用戶是否存在,這時就需要有一個用戶輸入內容的標簽。表單

form表單

之前學習的標簽更多的是向用戶展示信息,假如服務器端需要驗證用戶是否存在,這時就需要有一個用戶輸入內容的標簽。表單在網頁中主要負責數據采集功能,它用<form>標簽定義。用戶輸入的信息都要包含在form標簽中,點擊提交后,<form>和</form>里面包含的數據將被提交到服務器或者電子郵件里。所有的用戶輸入內容的地方都用表單來寫,如登錄注冊、搜索框。

表單在 Web 網頁中用來給訪問者填寫信息,從而能采集客戶端信息,使網頁具有交互的功能。一般是將表單設計在一個Html 文檔中,當用戶填寫完信息后做提交(submit)操作,于是表單的內容就從客戶端的瀏覽器傳送到服務器上,經過服務器上的 ASP 或 PHP 等處理程序處理后,再將用戶所需信息傳送回客戶端的瀏覽器上,這樣網頁就具有了交互性。這里我們只講怎樣使用Html 標志來設計表單表單是由窗體和控件組成的,一個表單一般應該包含用戶填  寫信息的輸入框,提交按鈕等,這些輸入框,按鈕叫做控件,表單很像容器,它能夠

容納各種各樣的控件。

表單標簽的格式: 

 <form action="url" method=get|post name="myform" ></form>

  -name:表單提交時的名稱

-action:提交到的地址

-method:提交方式,默認為get

post和get區別:

1.數據提交方式,get把提交的數據url可以看到,post看不到

2.get一般用于提交少量數據,post用來提交大量數據

3.get最多提交1K數據,post理論上沒有限制

4.get提交的數據在瀏覽器歷史記錄中,安全性不好一個完整的表單包含三個基本組成部分:

表單標簽、表單域、表單按鈕。

1.表單標簽

是指<form>標簽本身,它是一個包含表單元素的區域,使用<form></form>定義

2.表單域

是<form>標簽中用來收集用戶輸入的每一項,通常用input標簽來定義,input標簽有不同的類型,對應用戶不同的數據。(比如:文本域、下拉列表、單選框、復選框等等)

3.表單按鈕

用來提交<form>表單中的所有信息到服務器

表單域和表單按鈕都屬于表單元素。單行文本框<input type="text" >默認值是type="text"

密碼框<input type="password"/> 

單選按鈕<input type="radio" name=””/>

復選框<input type="checkbox"/>

隱藏域<input type="hidden"/>

文件上傳<input type="file"/>

下拉框<select>標簽<select><option value="1">北京</option></select>多行文本<textarea></textarea>提交按鈕<input type="submit"/>普通按鈕<input type="button"/>重置按鈕<input type="reset"/>文本框<input type="text" />

屬性:

name:定義控件名稱

value:指定控件初始值

密碼框<input type="password" />

屬性:name:定義控件名稱

value:指定控件初始值

單選按鈕

<input type="radio" />

屬性:

name:定義控件名稱

value:指定控件初始值

checked:設置控件初始狀態是否被選中

性別:

<input type="radio" name="sex"/>男

<input type="radio" name="sex"/>女

復選框

<input type="checkbox"  />

屬性:

name:定義控件名稱

value:指定控件初始值

checked:設置控件初始狀態是否被選中

例如:愛好:

<input type="checkbox" checked/>游戲

<input type="checkbox"/>唱歌

<input type="checkbox"/>跳舞

文件

<input type="file"/>

屬性:

name:定義控件名稱

使用file類型的input時要注意以下幾點

1.form表單的method屬性值要為post

1.form要加enctype="multipart/form-data"屬性,這個屬性說明了我們的文件以二進制方式傳輸文件,因為我們計算機本身最底層都是以二進制來顯示、傳輸。

默認地,表單數據會編碼為 "application/x-www-form-urlencoded",不能用于文件上傳

 <form action="" method="post" enctype="multipart/form-data">

<input type="file" name="file1"/>

 </form>

隱藏區域

<input type="hidden"  />

屬性:

name:定義控件名稱

value:指定控件初始值

按鈕

<input type="button"  />

屬性:

name:定義控件名稱

value:指定控件初始值

不具有提交功能


提交按鈕

<input type="submit"  />

屬性:

name:定義控件名稱

value:指定按鈕表面顯示文字


重置按鈕

<input type="reset"  />

屬性:

name:定義控件名稱

value:指定按鈕表面顯示文字


圖像圖片按鈕

<input type="image" src=https://www.school#/skin/m03skinBlue/image/nopic.gif>

屬性:

name:定義控件名稱

src:指定圖像地址


按鈕

 <button>按鈕</button>

屬性:

type:button/submit/reset,默認值為submit



下拉列表框

select屬性:                                      <select>

name:此列表框的名字                              <option></option>

multiple:多選,不用賦值                         <option></option>

size :規定下拉列表中可見選項的數目(顯示幾行)   </select>

disabled:規定禁用該下拉列表

option屬性:

selected :用來指定默認的選項

value: 用來給<option>指定的那一個選項賦值,這個值是要傳送到服務器上的,服務器正是通過調用<select>區域的名字的value 屬性來獲得該區域選中的數據項的




下拉列表框續

<select name="" id="">

<optgroup label="北京">

<option value="1">東城區</option>

<option value="2">西城區</option>

<option value="3">海淀區</option>

</optgroup>

<optgroup label="河北省">

<option value="4">石家莊</option>

<option value="5">保定市</option>

<option value="6">滄州市</option>

</optgroup>

</select>




多行文本框

<textarea></textarea>

屬性:

cols :這文字區塊的寬度

rows :這文字區塊的列數,即其高度


<textarea name="" i阿d="" cols="30" rows="10"></textarea>




<label></label>

標簽為 input 元素定義標注。

label是input的描述,它本身不會有特殊效果,但它和其它input標簽使用可以提升用戶的使用體驗,用戶不用非得點擊到按鈕,而是點擊文字即可選中,如“記住密碼”


  <label for="pwd">記住密碼</label>

<input type="checkbox" name="pwd" id="pwd" />


*通過label的for指向按鈕的id來綁定,for和id屬性的值要相同


<form>

<label for="male">Male</label>

<input type="radio" name="sex" id="male" />

</form>


<label>標簽一般和radio、checkbox類型一起使用。




<fieldset>元素集

fieldset 元素可將表單內的相關元素分組,通常和legend標簽一起用,legend標簽定義了fieldset的提示信息,fieldset是塊級元素。

<fieldset>

     <legend>健康信息</legend>

 身高:<input type="text" />

 體重:<input type="text" />

</fieldset>




HTML5新增input類型

1.在其他版本的HTML中,表單包含的元素非常有限,并且屬性也不多,尤其是在數據交互過程中數據的驗證需要編寫大量的Javascript代碼

2.以上的不足都已經在HTML5中被克服,HTML5在以上的基礎上增加了許多標簽和屬性,為開發人員帶來了極大的方便

電子郵件類型

功能描述:輸入E-mail地址的文本框

語法:<input type="email"/>

注意:輸入的內容中必須包含"@","@"后面必須具有內容

搜索類型

功能描述:輸入搜索關鍵字的文本框

語法:<input type="search"/>

URL類型

功能描述:輸入WEB站點的文本框

語法:<input type="url"/>

注意:輸入的內容中必須包含"http://",后面必須有內容

顏色類型

功能描述:預定義的顏色拾取控件

語法:<input type="color"/>

數字類型

功能描述:只能接受數字

語法:<input type="number"/>

屬性:min:當前域能接受的最小值

max:當前域能接受的最大值

step:決定了域所接受值遞增或遞減的步長,默認為1

范圍類型

功能描述:允許用戶選擇一個范圍內的值

語法:<input type="range" min="0" max="100" value="80"/>

屬性:min:范圍的下限值

max:范圍的上限值

step:聲明該值遞增或遞減的步長

value:設置初始值

日期類型

功能描述:創建一個日期輸入域

語法:<input type="date" />

周類型

功能描述:與date類型相似,但只能選擇周

語法:<input type="week" />

月份類型

功能描述:與date類型相似,但只能選擇月份

語法:<input type="month" />

HTML5新增屬性

placeholder

作用:默認提示

語法:<input type="text" placeholder="請輸入用戶名"/>

multiple

作用:支持在一個域中輸入多個值,逗號隔開,一般配合郵箱和URL使用

語法:<input type="email" multiple/>

autofocus

作用:自動獲取焦點

語法:<input type="text" autofocus/>

required

作用:防止域為空提交表單時

語法:<input type="text" required/>

minlength和 maxlength

作用:定制元素允許的最小字符數和最大字符數

語法:<input type="text" minlength="6" maxlength="18"/>

min和max

作用:定制元素允許的最小數字和最大數字

語法:<input type="number" min=”0” max=”100”/>

 
標簽: WEB前端教程
打賞
 
更多>同類資訊

推薦圖文
推薦資訊
點擊排行
網站首頁  |  關于我們  |  聯系方式  |  使用協議  |  版權隱私  |  網站地圖  |  排名推廣  |  廣告服務  |  網站留言  |  RSS訂閱  |  違規舉報  |  粵ICP備19057289號-9
 
伦理电影在线手机观看神马一视频