HTML标签——表单标签与属性介绍

表单标签

<form>
    <input>
    <textarea></textarea>
    <label></label>
    <select>
        <option></option>
    </select>
    <button></button>    
</form>

<form>：表示一个表单
<input>：单行文本输入框
<textarea>：多行文本输入框
<label>：表单辅助标签，扩大可点击范围
<select>：表示一个下拉选项菜单
<option>：下拉选项菜单中的子菜单项
<button>：表示一个按钮

<form>标签上的属性

1. 表单数据传递目的地：action="传输的目的地址路径"
2. 表单数据的请求方式：method="请求方式"
3. 表单名：name="自定义语义化名"

4. 表单值：value=""

   • name 和 value在服务器上是以键值对形式进行存储数据
5. 设置传输的数据类型：enctype=""

<input>标签上的属性

1. <input> 单行输入框的属性：

   • 输入框类型属性：type=""

     • 普通文本输入框：type="text"
     • 密码输入框：type="password"
     • 重置按钮：type="reset"
     • 提交按钮：type="submit"
     • 单选按钮：type="radio"
     • 多选按钮：type="checkbox"
     • 上传文件按钮：type="file"
     • 无效果点击按钮：type="button"
     • 邮件输入框：type="email"
     • 网址输入框：type="url"
     • 数字输入框：type="number"
     • 电话输入框：type="tel"
     • 滑动条：type="range"
     • 搜索输入框：type="serch"
     • 日期控件：type="data 或 month 或 week"
     • 颜色控件：type="color"
     • 时间控件：type="time"

   • 输入框值属性：value=""

     • 当type="submit"时，value属性设置的是按钮上的文字
     • 当type="checkbox 或 radio"时，value属性设置的是键值对的值
     • 当type="text 或 password"时，value设置的是文本框中的默认内容

   • 输入框名属性：name=""

     • 当type="radio 或 checkbox"时，必须设置name属性和属性值，并且同一组选项必须设置相同name属性值

   • 输入框文本提示属性：placeholder="提示文本"

     • 输入在文本框中输入内容后自动隐藏，清空输入框后自动显示

2. <textarea>多行输入框属性

   • 设置多行文本输入框的宽度：cols="数值"
   • 设置多行文本输入框的高度：rows="数值"

3. <label> 辅助表单属性

   • 标记目标属性：for="目标id名"

4. <select> 下拉选项菜单属性

   • 下拉选项菜单名：name=""

5. <option> 菜单选项属性

   • 与菜单name组成键值对：value=""
   • 默认选中：selected="selected"

6. <button>按钮属性

   • 按钮类型属性：type=""

     • 重置按钮：type="reset"
     • 提交按钮：type="submit"
     • 单击按钮：type="button"

7. 其他相关属性：

   • 表示选中状态属性：checked="checked"
   • 表单元素禁用属性：disabled="disabled"

输入框选项列表

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

输入框使用 list 属性与 datalist标签的id 名相关联

HTML5新增标签

• 表单内部分组标签

  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
  
  <fieldset>：表示一组
  <legend>：表示每组的标题

• 下拉菜单选项分组

  <select>
    <optgroup label="Swedish Cars">
        <option value ="volvo">Volvo</option>
        <option value ="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
        <option value ="mercedes">Mercedes</option>
        <option value ="audi">Audi</option>
    </optgroup>
  </select>

HTML5新增属性

• 自动完成输入属性：autocomplete="on 或 off"
• 自动获取焦点属性：autofocus
• 空内容提示：required
• 正则规则验证表单：pattern
• 多选文件：multiple