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時 name取相同值實現(xiàn)單選

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

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

<button></button>相比于submit更實用 雙標簽可以插入其他東西

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

表單字段集

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

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

字段集標題

<legend></legend> align:left/right/center/justify;標題位置

legend必須是表單的第一個子集元素

label 為input元素定義標注

用于綁定一個表單元素 ，點擊label內(nèi)的文本會自動將光標定到相應的表單元素上增加用戶體驗

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

下拉菜單

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

文本域

<textarea></textarea>

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

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

表單輪廓線

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

總結(jié)

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

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