## HTML基礎-表單標簽
# form標簽(表單)
#?datalist標簽
# select標簽
# optgroup分組名
# textarea標簽
# text
# filedset表單邊框
# legend 表單標題
1.什么是表單?
-表單就是專門用來收集用戶信息的
2.什么是表單元素?
2.1什么是元素(element)
-在HTML中 標簽/標記/元素 都是指HTML中的標簽
例如:a標簽/a標記/a元素
表單元素其實都是HTML中的一些標簽,只不過這些標簽比較特殊,在瀏覽器中所有的表單標簽都有特殊的外觀和默認的功能
3.表單的格式
<表單元素>
4.常見的表單元素
input標簽,input標簽有一個type屬性,這個屬性有很多類型的取值,取值的不同決定他不同的外觀和功能—>
明文輸入框
賬號:
暗文輸入框
密碼:
給輸入框設置默認值
value
input屬性:
1.type:
-text:明文輸入框
(type=“text”)
-password:暗文輸入框
(type=“password”)
-radio:單選框
(注意:1.默認情況下單選框不會互斥,要想單選框互斥那么必須給每個單選框一個name,而且name屬性必須設置相同的值
2.要想單選框默認選中一個框,那么可以給input標簽添加一個checked屬性 checked=“”
3.HTML中如果屬性名跟取值名一樣,可以省略不寫,但是xhtml中必須寫上,推薦一定要寫
4.如果單選框都設置了一樣name,設置了多個checked,那么生效的是最后的checked,也就是只單選選中最后一個)
-checkbox:復選框
(注意:要想復選框默認選中一個或多個框,那么可以給input標簽添加一個checked標簽 checked=“”)
-button:普通按鈕
(input type=“button” value=”我是按鈕”)
-image:圖片按鈕
(input type=“image” src=“”)
-reset:重置按鈕
(type=“reset” 用于清空表單中已填好的數(shù)據(jù).如果想重置按鈕標題可以設置value屬性 value=“清空”)
-submit:提交按鈕
(type=“submit” 將表單中的數(shù)據(jù)提交到遠程服務器中 注意:1.需要添加action屬性指定提交到的服務器地址 2.需要給需要提交到服務器的表單元素都添加一個name屬性 )
-hidden:隱藏域(type=“hidden” 配合提交按鈕將一些數(shù)據(jù)偷偷地上傳到服務器)
2.value
給輸入框默認值
3.name
4.checked
label
1.默認情況下文字和輸入框都是沒有關聯(lián)關系的
也就是說點擊文字輸入框不會聚焦,如果想點擊文字時讓對應的輸入框聚焦,那么就需要讓蚊子和輸入框進行綁定
2.想讓輸入框和文字綁定在一起,那么我們可以使用label標簽
3.格式1(官方)
3.1給輸入框一個id
3.2在label標簽中通過for屬性跟id綁定
label for=“account”>賬號
label for=“password”>密碼
格式2(方便,但有局限-比如錯位綁定)
賬號
了解
datalist標簽
作用:給輸入框綁定待選項
格式:
待選項內(nèi)容1
待選項內(nèi)容2
待選項內(nèi)容3
如何給輸入框綁定待選列表
1.搞一個輸入框
2.搞一個datalist列表
3.給datalist標簽添加一個列表,并設置id屬性
4.給輸入框一個list屬性,并綁定datalist的id屬性
例:
請輸入你的車型:
待選項內(nèi)容1
待選項內(nèi)容2
待選項內(nèi)容3
H5新的input類型type(很多瀏覽器不兼容,所以只需要了解):
email:自動校驗郵箱格式
url:自動校驗url格式http://www.baidu.com
number:自動校驗是否為數(shù)字
date:可以通過日歷選擇時間
color:可以通過取色板選擇顏色
select標簽
-作用:用于定義下拉列表
-格式:
注意點:
1.下拉列表不能輸入內(nèi)容,但是可以下拉選擇
2.可以通過給option標簽添加一個selected標簽設置默認選中
3.可以通過給option包裹一個optgroup標簽給下拉列表進行分類,給select標簽里添加optgroup標簽
-optgroup分組名
textarea標簽
-作用:定義一個可以換行的文本輸入框
-格式:文本
注意點:
1.默認情況下輸入框可以無限換行
2.默認情況下輸入框有自己的寬高
3.通過col? row可以指定列數(shù)和行數(shù),但是雖然可以指定行列數(shù),但是還是可以無限輸入
4.輸入框可以拉大拉小
5.可以在css里設置resize:none,固定輸入框的大小
除了按鈕類型的input標簽以外, 其它的類型的標簽都可以通過一個name屬性來指定將來提交到服務器的值
了解:
? 空格
filedset
-作用:可以給表單添加一個邊框
-格式
legend
-作用:給表單一個標題
datalist標簽
