HTML - 表单元素

form元素

一般情况下, 一个表单需要一个form元素, 其他表单元素都是forn元素的子元素

语法: <form action="提交数据的URL">其他表单元素</form>

其他属性:

1. method 表单提交的方法

   a)get: 以明文形式提交数据

   b)post: 将数据放在请求体中, 然后以请求体形式提交数据

   区别:

   • get的数据显示在请求路径中(格式: url?name1=val1&name2=val2), post的在请求体中
   • get提交的数据一般不超过1kb, post则没有限制

2. enctype 对提交数据的编码方式

3. accept-charset 对请求路径进行字符编码, 默认跟随当前HTML文档的编码

文件上传的必要条件

1. method=”post”
2. enctype=”multipart/form-data”
3. <input type="file" name="xxx">

input元素

语法: <input type="类型">

type属性

1. text 文本输入框(明文输入)
2. password 文本输入框(密文输入)
3. radio 单选框
4. checkbox 复选框
5. button 普通按钮
6. reset 重置按钮
7. submit 提交按钮
8. file 文件上传
9. number 数字输入框
10. email 邮箱输入框
11. search 搜索输入框
12. color 颜色控件
13. date 日期控件
14. month 年份月份控件
15. week 年份周数控件
16. time 时间控件
17. datetime 日期时间控件(基于UTC时区), chrome不支持
18. datetime-local 日期时间控件
19. image 图片按钮, 效果和submit相同
20. range 拖拽条
21. tel 电话输入框
22. url 地址输入框
23. hidden 隐藏输入字段(在页面中隐藏一个数据, 在发送请求时, 将隐藏数据发送给服务器)

其他通用属性

1. name 规定input元素的名称
2. value 规定input元素的value值
3. required 布尔属性, 规定该字段是必填项
4. readonly 布尔属性, 规定该字段是只读字段
5. disabled 布尔属性, 规定该input元素被禁用
6. autofocus 布尔属性, 规定当文档加载完, 该input元素自动获得焦点
7. pattern 正则表达式, 验证input元素的value值

注意点和特殊属性

1. w3c规范规定input标签要有关联的label标签, 当用户点击<label>里面的文字时, 浏览
   器会自动把光标转载表单控件上

   label语法: <label for="input元素id值">描述</label>

2. 一般 name、value 、id都是和后台约定的值

3. 除了按钮, 其他input元素一般需要 name 属性

4. 如果form元素中没有name属性元素, form元素的action属性会失效, 提交不了表单

5. 常用type类型为 1 - 8, 后面的可能有兼容性问题

6. 针对所有输入框的属性:

   a) placeholder 占位文字, 提示词

   b) maxlength 规定输入的最大字符数

   c) minlength 规定输入的最小字符数

   d) size 规定输入框的可见宽度(按字符计算)

   e) autocomplete 值为 on|off 规定输入框是否弃用自动完成功能

   f) list 指向<datalist>元素的id值, 含input元素的预定义选项

   ​ datalist语法:

   <datalist id="xxx">
       <option value="aaa">
   </datalist>
   

7. 针对所有按钮, value属性可以改变按钮的名称

8. 针对单选框(radio)和复选框(checkbox), 让同一组选择框产生关联, name属性值需要一致, checked布尔属性表示默认选中

9. 针对文件上传, multiple属性支持上传多文件

button元素

和input元素的按钮效果一样

语法: <button type="按钮类型">按钮名字</button>

button元素一般搭配js赋予动作效果

select元素

下拉选择菜单

语法:

<select name="$" id="#">
    <option value="值">描述</option>
</select>

select元素常用属性: a) multiple 多选 b) size 显示多少项

option元素常用属性: selected 默认选中

textarea元素

文本域

语法: <textarea cols="列" rows="行">预设值</textarea>

注意点:

1. 建议不用col, row设置尺寸, 通过CSS的width, height设置
2. 文本域设置CSS样式: resize: none(禁止缩放)|horizontal(水平缩放)|vertical(垂直缩放)|both(水平垂直缩放);

fieldset元素

fieldset 元素可将表单内的相关元素分组, 将表单内容的一部分打包，生成一组相关表单的字段

语法:

<fieldset>
    <legend>fieldset标题</legend>
    <form></form>
</fieldset>