表单

表单

1. 表单框：

<form name="表单名称" method="post/get" action="#"></form>

2. 文本框

<input type="text" value="默认值"/>

3. placeholder = “ 输入框内容 ”

<input type="text" placeholder=”框内显示内容 ”>

4. 密码框

<input type="password" />

5. 提交按钮

<input type="submit" value="按钮内容" />

6. 重置按钮

<input type="reset" value="按钮内容" />

7. 单选框/单选按钮

男<input type="radio" name="ral"/>
女<input type="radio" name="ral" />
//单选按钮里的name属性必须写，同一组单选按钮的name属性值必须一样。

8. 复选框

<input type="checkbox" name="like" />
<input type="checkbox" name="like" disabled="disabled" /> 
(disabled="disabled" :禁用)
(checked="checked" :默认选中)

9. 下拉菜单

<select name="">
	<option>菜单内容</option>
</select>

10. 多行文本框（文本域）

<textarea name="textareal" cols="字符宽度" rows="行数"></textarea>

11. 按钮

<input name="'" type="button" value=“按钮内容” />
//他和submit的区别是 ，submit是提交按钮 起到提交信息的作用，button只起到跳转的作用，不进行提交。

12. 表单字段集：

相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。disabled定义空间禁止使用；

<fieldset></fieldset>

13. 字段级标题：legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必 须是fieldset内的第一个元素。

<legend align="left/center/right/justify"></legend>

14. 提示信息标签：label元素用来定义标签，为元素指定提示信息。要将label元素绑定到其 他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。

<label for="绑定控件id名"></label>
//例子：
<label><input type="checkbox" name="hobby"/>睡觉</label>

15. 上传文件框：type属性值新增的类型有：file文件类型，可进行文件的选择，multiple属 性可实现多选

<input type="file" multiple="multiple" />

16. 图像域：可以作为提交按钮

<input type="image" src="" width="" height=""  alt="图片" />

更多表单类型

1. color 颜色选择器

<input type="color" />

2. email

<input type="email" />

3. number 只能包含数字的输入框

<input type="number" />

4. tel 电话号码，移动端会弹出数字键盘

<input type="tel" />

5. url 网页的URL，会在提交表单时对 url 字段的值自动进行验证
   
   

6. range

//特定范围内的数值选择器，min、max、step( 步数 )、value
<input type="range" min="" max="" step="" value=""/>

8. date、month、week 显示日期

<input type="data" />

9. time 显示时间

<input type="time" />

10. autofocus 获取焦点

<input type="text" autofocus />

11. required 验证条件，必填项

<input type="text" required />

12. Pattern 正则表达式
    输入的内容必须匹配到指定正则 例如：

<input type="text" pattern="\d{3}" />
//小写d代表阿拉伯数字，大写D代表英文字母