乐趣区

关于前端学习:HTML标签表单标签与属性介绍

jiezi

表单标签 

<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
退出移动版