乐趣区

关于前端:HTML标签-之-表单

jiezi

在网页中，在咱们须要收集用户信息的时候，就会用到表单。比方注册账号时有时候须要用户的名字、性别、出生日期、电话、邮箱等，就能够用表单来解决。

一个残缺的表单通常由 表单域 、 表单控件（表单元素）和 提示信息 3 个局部形成。

一、表单域

表单域是一个蕴含表单控件的区域，在 HTML 标签中，<form> 标签用来定义表单域，以实现用户信息的收集和传递。<form> 会把它范畴内的表单元素信息提交给服务器。

<form action="url" method="post" name="test">
   ...    // 表单控件
</form>
  • action：值为 url 地址，用于指定接管并解决表单数据的服务器程序的 url 地址
  • method：值为 get 或 post，用于设置表单数据的提交形式
  • name：用于指定表单的名称，因为同一个页面中可能有多个表单域。

二、表单控件

1、<input> 表单控件

input 是输出的意思，在表单控件中，<input> 标签用于收集用户信息。

在 <input> 标签中，蕴含一个 必须的 type 属性，依据 type 不同的值，<input> 能够有多种形式：文本、复选框、单选按钮、按钮等。

<input type="text" />    <!-- <input> 也是单标签 -->
type 属性值 阐明
text 定义单行的输出字段，用户能够在外面输出文本，例如输出用户名
password 定义明码字段，用户输出后看不到明文，个别输出明码时用到
radio 定义单选按钮，比方在抉择性别时，实现多选一（多个 radio 必须有雷同的 name 能力实现真正的多选一）
checkbox 定义复选框，比方在抉择“我喜爱的栏目”时，能够同时抉择多个（多个 checkbox 有雷同的 name 能力把所有的抉择都正确传到服务端）
button 定义可点击按钮，value 值能够设置按钮文字
file 定义输出字段和“浏览”按钮，供文件上传
reset 定义重置按钮，重置按钮会革除表单中的所有数据
submit 定义提交按钮，提交按钮会把表单数据发送到服务器
hidden 定义暗藏的输出字段
image 定义图像模式的提交按钮

<input> 标签其余罕用属性：

属性 属性值 阐明
name 自定义 定义 input 控件的名称
value 自定义 定义 input 控件的值
checked checked 此 input 控件首次加载时该当被选中
maxlength 正整数 输出文字时字符的最大长度
  1. name 和 value 是每个表单控件都有的属性值，次要给后盾人员应用
  2. name 是表单控件的名字，要求 单选按钮和复选框都要有雷同的 name 值

2、<label> 标签

<label> 标签用于绑定一个表单控件，当点击 <lable> 标签内的文本时，浏览器就会主动将光标转到对应的表单控件上，晋升用户体验。（能够了解为增大点击区域了）

  <!-- 这样在点击“男”这个字时，也会选中该单选框 -->
  <label for="sex"> 男 </label>
  <input type="radio" name="sex" id="sex" />

留神：<label> 标签的 for 属性该当与相干控件的 id 属性雷同

3、<select> 下拉表单控件

当页面中有多个选项让用户抉择时，想要节约页面空间，咱们能够应用 <select> 标签控件定义下拉列表。例如咱们在抉择省份和地区时。

<select>
  <option> 北京 </option>
  <option> 天津 </option>
  <option> 河北 </option>
  <option selected="selected"> 山西 </option> 
  <!-- 在 <option> 中定义 selected="selected"，以后项为默认选中项 -->
  ...
</select>

4、<label> 文本域控件

当用户须要输出较多内容时，能够应用 <textarea> 标签，它用于定义多行文本输出的控件。比方留言板、评论等。

<textarea rows="3" cols="20">
  默认的文本内容
</textarea>

其中属性 cols 为每行中的字符数，rows 为显示的行数，理论开发中用 CSS 来管制。

退出移动版