003. 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>

• 值为url
• 提交表单时，后台服务器接收表单数据的后台URL地址

• 前台发送数据到后台服务器的方式，值为：
  • get
    • 前台使用action的URL来包含参数向后台传递数据
    • 此方式发送信息的数量有限制
    • 一般用于从后台获取非隐秘信息
  • post
    • 前台把表单数据作为http请求体的一部分向后台传递隐秘数据
    • 此方式发送信息的数量没有限制
    • 一般用于从后台获取隐秘信息和修改服务器上的数据

• 表单的名称

• 规定在何处打开action URL，值为：
  • _self
  • _blank
  • _top
  • _parent

• 规定前台在向服务器发送数据之前，对数据进行编码的方式，一般用于method="post"的情况
• 值为：
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

• 单行文本域
• 此模式下，<input />相应属性：
  • name = "单行文本域的名称"
  • maxlength = "文本框内可输入的最大字符长度"
  • size = "文本框的宽度，以字符个数为单位，默认20个字符"
  • value = "文本框的默认值"
  • placeholder = "文本框内浅字显示的提示文本"

• 密码域
• 也是文本域，前台文本框密码被***替代，用于安全保护隐私

• 文件域
• 上传文件

• 单选域
• 此模式下，<input />相应属性：
  • 此模式下，同一组的name属性值一定要相同，给使用者做可识别标识(后台服务器)
  • value = "一般是选项的标识数据，提供给使用者(后台服务器)"
  • checked属性，默认此项为初始选中项

• 复选域
• 此模式下，<input />相应属性：
  • 此模式下，同一组的name属性值建议相同，给使用者做可识别标识(后台服务器)
  • value = "一般是选项的标识数据，提供给使用者(后台服务器)"
  • checked属性，默认此项为初始选中项

• 普通按钮
• 此模式下，<input />相应属性：
  • name = "按钮名称，给使用者做可识别标识(后台服务器)"
  • value = "前台按钮上显示的文本"

• 提交按钮
• 此模式下，<input />相应属性：
  • name = "按钮名称，给使用者做可识别标识(后台服务器)"
  • value = "前台按钮上显示的文本"

• 图像域，图像提交按钮
• 此模式下，<input />相应属性：
  • name = "图像提交按钮名称，给使用者做可识别标识(后台服务器)"
  • src = "图片地址或链接"

• 重置按钮
• 此模式下，<input />相应属性：
  • name = "按钮名称，给使用者做可识别标识(后台服务器)"
  • value = "前台按钮上显示的文本"

• 隐藏域
• 此模式下，<input />相应属性：
  • name = "名称，给使用者做可识别标识(后台服务器)"
  • value = "提供给使用者的数据(后台服务器)"

• name = "下拉菜单和列表的名称"

• 可选择多个选项

• size = "列表中可见选项的数目"

 <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>

• 默认此项为初始选中项

• value = "提供给使用者的数据(后台服务器)"

• name = "多行文本域的名称"

• placeholder = 文本区的预期内容简短描述提示

• rows = "文本区内的可见行数"

• cols = "文本区内的可见宽度"

---

我是弦歌，
一个渴望成长的前端小白，
欢迎您的留言，
更期待您的不吝指正。

若我的内容能帮助到您，欢迎关注我
记得点赞收藏哦