一、表單
(1)表單的作用:與用戶進行交互,提供表單元素讓用戶輸入
(2)表單元素:
文本框(text): 單行,基本輸入
列表框(select):提供多個項讓用戶選擇
單選框(radio) :用戶只能選擇其中一項
複選框(checkbox):用戶可以選擇多項
密碼框(password):輸入敏感數據
文本域(textarea):多行文本
文件域(file): 讓用戶選擇文件
注:輸入(text,password,textArea),選擇(select,radio,checkbox,file),按鈕(button,submit,reset,image)
普通按鈕: button
提交按鈕: submit(將表單中用戶輸入的數據提交到服務器)
重置按鈕: reset, 還原到初始狀態(與清空近似)
圖片提交按鈕:image
隱藏域: hidden,隱式提交的數據,用戶不可見
(3)表單標記:form
<form action="數據提交的地址" method="提交的方式">
...表單元素
</form>
注:1.一個網頁中可以有多個form
2.表單元素需要寫在form標記中
3.提交方式有post密文提交(例登錄信息), get地址欄顯示提交(例搜索引擎)
(4)表單元素標記:input,select,button,textarea
1.input
<input type="表單元素的類型" name="表單元素的名字" value="值" size="大小"maxlength="最大長度"
checked="true|false" src="圖片提交按鈕的路徑"/>
注:a.文本域和列表框不能使用input標記
b.取名時儘量讓名字有意義,例: chkLike= chk類型,like作用
c.單選框複選框同組的名字要相同
d.單選框和複選框的值不可見,只用於提交,例:<input type="radio" value="1"/>男
男是提示作用,1會提交到服務器
e.size是指寬度,maxlength允許輸入的字數
f.checked用於單複選,是否選中,默認不選中
g.不帶type,默認是文本框
2.texarea文本域
<textarea cols="總列數" rows="總行數" name="名字">值</textarea>
注:textarea沒有value屬性
值可以直接使用空格和回車
3.select...option列表框
<select name="sltShengfen">
<option>湖南</option>
<option>湖北</option>
<option selected="true">江西</option>
<option>江蘇</option>
</select>
4.button按鈕
<button type="reset|button|submit">內容</button>
注:<button>與<input>比較:
<button>更靈活,可以插圖片和使用文字,也可局部設置格式
<input> 更通用,除了文本域和列表框,它都可實現
注2:省略type,默認爲button
二、小知識:
1.<!--註釋 -->
2.特殊符號 &開頭;結束
< 表<
> 表>
表空格
" 表引號
© 版權符號
3.表單的readonly和disabled
(1)readonly用於輸入框 ,disabled用於按鈕
(2)readonly表示只讀,disabled禁用
(3)如果文本框使用readonly表示只讀,但數據可以提交
但使用disabled不僅是隻讀,框中數據不能被提交