003. html篇之《表单》

  • 003. html篇之《表单》已关闭评论
  • 81 次浏览
  • 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请求体的一部分向后台传递隐秘数据
      • 此方式发送信息的数量没有限制
      • 一般用于从后台获取隐秘信息和修改服务器上的数据
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 = "文本区内的可见宽度"

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

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