- A+
所属分类：Web前端
html篇之《表单》
一、结构
<form action="url" method="post" name=""> <label>标注</label><input type="text" /> <select name=""> <option value="">选项1</option> <option value="">选项2</option> <option value="">选项3</option> </select> <select name=""> <optgroup label="分组1"> <option value="">选项1</option> <option value="">选项2</option> <option value="">选项3</option> </optgroup> <optgroup label="分组2"> <option value="">选项1</option> <option value="">选项2</option> <option value="">选项3</option> </optgroup> </select> <textarea name="" cols="30" rows="10">多行文本域</textarea> </form> 二、标签属性
1. <form name="表单标签"></form>标签
(1) 属性
① action
- 值为url
- 提交表单时，后台服务器接收表单数据的后台URL地址
② method
- 前台发送数据到后台服务器的方式，值为：
- get
- 前台使用action的URL来包含参数向后台传递数据
- 此方式发送信息的数量有限制
- 一般用于从后台获取非隐秘信息
- post
- 前台把表单数据作为http请求体的一部分向后台传递隐秘数据
- 此方式发送信息的数量没有限制
- 一般用于从后台获取隐秘信息和修改服务器上的数据
- get
③ name
- 表单的名称
④ target
- 规定在何处打开action URL，值为：
- _self
- _blank
- _top
- _parent
⑤ enctype
- 规定前台在向服务器发送数据之前，对数据进行编码的方式，一般用于
method="post"的情况 - 值为：
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
2. <input name="表单输入标签"/>标签
(1) type属性，值为：
① text
- 单行文本域
- 此模式下，
<input />相应属性：- name = "单行文本域的名称"
- maxlength = "文本框内可输入的最大字符长度"
- size = "文本框的宽度，以字符个数为单位，默认20个字符"
- value = "文本框的默认值"
- placeholder = "文本框内浅字显示的提示文本"
② password
- 密码域
- 也是文本域，前台文本框密码被
***替代，用于安全保护隐私
③ file
- 文件域
- 上传文件
④ radio
- 单选域
- 此模式下，
<input />相应属性：- 此模式下，同一组的name属性值一定要相同，给使用者做可识别标识(后台服务器)
- value = "一般是选项的标识数据，提供给使用者(后台服务器)"
- checked属性，默认此项为初始选中项
⑤ checkbox
- 复选域
- 此模式下，
<input />相应属性：- 此模式下，同一组的name属性值建议相同，给使用者做可识别标识(后台服务器)
- value = "一般是选项的标识数据，提供给使用者(后台服务器)"
- checked属性，默认此项为初始选中项
⑥ button
- 普通按钮
- 此模式下，
<input />相应属性：- name = "按钮名称，给使用者做可识别标识(后台服务器)"
- value = "前台按钮上显示的文本"
⑦ submit
- 提交按钮
- 此模式下，
<input />相应属性：- name = "按钮名称，给使用者做可识别标识(后台服务器)"
- value = "前台按钮上显示的文本"
⑧ image
- 图像域，图像提交按钮
- 此模式下，
<input />相应属性：- name = "图像提交按钮名称，给使用者做可识别标识(后台服务器)"
- src = "图片地址或链接"
⑨ reset
- 重置按钮
- 此模式下，
<input />相应属性：- name = "按钮名称，给使用者做可识别标识(后台服务器)"
- value = "前台按钮上显示的文本"
⑩ hidden
- 隐藏域
- 此模式下，
<input />相应属性：- name = "名称，给使用者做可识别标识(后台服务器)"
- value = "提供给使用者的数据(后台服务器)"
3. <select></select>标签
(1) 属性
① name
- name = "下拉菜单和列表的名称"
② multiple
- 可选择多个选项
③ size
- size = "列表中可见选项的数目"
(2) 标签配搭使用
① 基本选项标签
<select name=""> <option value="">选项1</option> <option value="">选项2</option> <option value="">选项3</option> </select> ② 分组下拉菜单
<select name=""> <optgroup label="分组1"> <option value="">选项1</option> <option value="">选项2</option> <option value="">选项3</option> </optgroup> <optgroup label="分组2"> <option value="">选项1</option> <option value="">选项2</option> <option value="">选项3</option> </optgroup> </select> 4. <option></option>标签
(1) 属性
① selected
- 默认此项为初始选中项
② value
- value = "提供给使用者的数据(后台服务器)"
5. <textarea></textarea>标签
(1) 属性
① name
- name = "多行文本域的名称"
② placeholder
- placeholder = 文本区的预期内容简短描述提示
③ rows
- rows = "文本区内的可见行数"
④ cols
- cols = "文本区内的可见宽度"
我是弦歌，
一个渴望成长的前端小白，
欢迎您的留言，
更期待您的不吝指正。
若我的内容能帮助到您，欢迎关注我 ♥
记得点赞收藏哦 ♥
