11-表单标签¶

表单¶

表单：是用于收集用户输入数据，并将数据提交到后端进行处理。

表单的核心标签有三部分组成：

表单容器¶

<form>：定义表单的容器，包裹所有表单控件。默认包含action属性语法

<form action="提交地址">
  <!-- 表单控件 -->
</form>

表单控件¶

input 标签

<input type="text" name="username" value="默认值" placeholder="提示文本" />

type：控件类型

text 单行文本
password 密码框

属性类型：

name：控件的名称，用于提交到后端
placeholder：提示文本，输入框为空时显示
acceskey:使元素获得焦点的快捷键,设置一个字母就好，比如设置a，当用户按下alt+s的时候，焦点会自动跳到具有acceskey="a"的元素上
Wlndows:Alt+s
mac:control+foption+s
autocomplete ：自动填充历史值，on/off

单选框¶

<input type="radio" name="gender" valan="0" checked />女
<input type="radio" name="gender" valan="1" />男

其中的type是radio，表示单选框
name属性是单选框的分组，name相同为一组，只能再一组里选择一个
value是提交到后端的值，如果是0就是女，如果是1就是男,一般都返回数字，通过数字区分是哪一个
checked是默认选中，页面刷新后，默认选中女，如果设置多个，已最后一个为基准

复选框¶

爱好： <input type="checkbox" name="hobby" valan="0" />篮球
<input type="checkbox" name="hobby" valan="1" />足球
<input type="checkbox" name="hobby" valan="2" />乒乓球

其他属性和单选框一样，只是type是checkbox

文件域¶

<input type="file" name="file" />

文件域默认选择一个，如果需要多选，添加 multiple 属性
上传文件时，可以设置上传文件的类型 accept,多个类型用,隔开
- 书写格式：accept=".exe,.zip,jpg,png"
- 文件后缀之间用,隔开

文本域¶

<textarea
  name="content"
  cols="30"
  rows="10"
  placeholder="请输入文本"
></textarea>

name 属性：控件的名称，用于提交到后端
cols：文本域的列数，即一行显示多少个字符
rows：文本域的行数，即显示多少行
placeholder：提示文本，输入框为空时显示
文本域可以输入多行文本，默认是单行文本

下拉列表¶

<select>
  <option value="北京" selected>北京</option>
  <option value="上海">上海</option>
  <option value="广州">广州</option>
</select>

<select>元素是容器
<option>是每一个选项标签，每个选项要跟一个值
要想默认选中一个选项，可以添加 selected 属性。

按钮¶

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>

type属性：
- submit：提交按钮，点击后提交表单
- reset：重置按钮，点击后重置表单
- button：普通按钮，没有默认行为，需要配合js使用

其他属性：

disabled：禁用按钮

辅助标签 label¶

lable标签可以优化用户体验，点击label标签，可以自动聚焦到对应的input标签上。

lable标签的两种使用方式：

直接包含input标签¶

<label>用户名：<input type="text" name="username" /></label>

用for属性和id属性对应¶

<label for="username">用户名：</label>
<input type="text" name="username" id="username" />

label 标签的 for 属性，和 input 标签的 id 属性对应，点击 label 标签，会自动聚焦到对应的 input 标签上。

用lable 可以设置点击文字把光标定位到输入框中，提高用户体验

<label>
用户名：<input type="text" name="username" />
</label>