HTML5

表單

<from method="get/post(更安全) action="傳給誰>

?? <input type="text(文本)/password(密碼)/submit(提交按鈕) /
?? radio(單選)/checkbox(多選)/button(單純按鈕)/file(文件上傳)/
?? hidden(隱藏的輸入字段)/image(圖像形式的提交按鈕)/reset(重置按鈕)>

? 其他屬性:
value="值

? name="名稱

? placeholder="提示

input::-webkit-input-placeholder{ color:green;}(修改placeholder樣式)

? size=尺寸 寬度（字符數(shù)）

? maxlength=“正整數(shù) 規(guī)定輸入字符的最大長度

注:radio時(shí) name取相同值實(shí)現(xiàn)單選

?? ?? radio和checkbox時(shí) checked=“checked”(可省略) 實(shí)現(xiàn)默認(rèn)選擇

?? ?? ?? ?? ?? ?? ?? ?? ?? disable=“disable”(可省略) 實(shí)現(xiàn)不可選

<button></button>相比于submit更實(shí)用 雙標(biāo)簽可以插入其他東西

使用阿里矢量圖標(biāo)庫時(shí) 可以在表單元素內(nèi)添加矢量圖(添加在線css及iconfont類名) eg： <input type="text" placeholder="&#xxxxx" class="iconfont"> 或 <button class="iconfont">&#xxxxx</button>

表單字段集

<fieldset></fieldset> disabled表示不可以填寫用戶信息

表單盒子，用于收集用戶信息，默認(rèn)自帶邊框，可以互相嵌套

字段集標(biāo)題

<legend></legend> align:left/right/center/justify;標(biāo)題位置

legend必須是表單的第一個(gè)子集元素

label 為input元素定義標(biāo)注

用于綁定一個(gè)表單元素 ，點(diǎn)擊label內(nèi)的文本會(huì)自動(dòng)將光標(biāo)定到相應(yīng)的表單元素上增加用戶體驗(yàn)

<label for="sex”> 男</label>`<input type="radio" name="sex" id="sex"/>

下拉菜單

<select><option selected="select(默認(rèn)選擇)" value=""></option> </select> <!-- select的value獲取到的就是當(dāng)前被選中的option的value，如果option沒有value，就獲取option的標(biāo)簽內(nèi)容 -->

文本域

<textarea></textarea>

resize：none；可以防止文本域拖拽

且文本域需在一行代碼內(nèi)，代碼換行時(shí)文本域內(nèi)有空處。

表單輪廓線

給表單添加outline：0；或者outline：none樣式之后，就可以去掉默認(rèn)藍(lán)色邊框。

總結(jié)

以上是生活随笔為你收集整理的HTML的表单样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。