003. html篇之《表单》

Posted 2023-03-03 弦歌是只敲代码的前端大猫

弦歌的html篇 之 《表单》总结

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请求体的一部分向后台传递隐秘数据
    • 此方式发送信息的数量没有限制
    • 一般用于从后台获取隐秘信息和修改服务器上的数据

③ 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 = "文本区内的可见宽度"

---

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

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