表单标签

<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