HTML的表单样式

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=尺寸 宽度（字符数）

​ maxlength=“正整数 规定输入字符的最大长度

注:radio时 name取相同值实现单选

      radio和checkbox时 checked=“checked”(可省略) 实现默认选择

                           disable=“disable”(可省略) 实现不可选

<button></button>相比于submit更实用 双标签可以插入其他东西

使用阿里矢量图标库时 可以在表单元素内添加矢量图(添加在线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内的文本会自动将光标定到相应的表单元素上增加用户体验

   <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的标签内容 -->

文本域

         <textarea></textarea>

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

且文本域需在一行代码内，代码换行时文本域内有空处。

表单轮廓线

给表单添加outline：0；或者outline：none样式之后，就可以去掉默认蓝色边框。