《HTML&&CSS3入门经典》(6)——表单

1. 使用<form>元素创建表单

  1. action特性:指明表单提交后对数据的处理
  2. method特性:表单数据可以通过两种方式发送给服务器,每一种方式对应于一种HTTP方法:
    • get方法,将数据作为URL的一部分发送,默认值
    • post方法,将数据隐藏在HTTP头中
  3. id特性
  4. name特性
  5. enctype特性:指定浏览器在将数据发送到服务器之前如何对其进行编码。浏览器通常支持三种类型的编码方式:
    1. application/x-www-form-urlencoded,是大多数表单使用的标准方法
    2. multipart/form-data,通常用于访问者需要向服务器上传文件时
    3. text/plain,以纯文本形式不加修饰地将数据发送至服务器
  6. accept-charset特性:指定一系列用户能够输入,并且之后服务器可以处理的字符编码
  7. novalidate特性:用以指定表单在提交时是否应该进行校验,如果该特性存在,浏览器则不应该在提交前校验表单
  8. target特性
  9. autocomplete特性:指明浏览器是否应该自动填写表单值

2. 表单控件

  1. 文本输入控件
    1. 单行文本输入控件:<input>元素的type特性值为text
    2. 密码输入控件:<input>元素的type特性值为password
    3. 多行文本输入控件:使用<textarea>元素
  2. 新的HTML5输入控件类型与特性
    1. 使用placeholder特性提供示例输入
    2. 使用autocomplete特性确保用户隐私与安全
    3. 使用required特性确保信息提供
  3. 按钮
    通过三种方式创建按钮:
    • 使用<input>元素,并且type特性的值为submit、reset或button
    • 使用<input>元素,并且type特性的值为image
    • 使用<button>元素
  4. 复选框
    通过type特性值为checkbox<input>元素创建。复选框可以单独出现(如是否接受条款与条件),也可以作为复选框组出现(比如希望用户从一个给出的列表中指定其具有的全部技能)
  5. 单选按钮
    通过type特性值为radio<input>元素创建。

    术语“单选按钮”(radio button)源自于老式收音机(radio)。在一些老式收音机上,在设定好的频道中,一次只能按下一个按钮已选择希望收听的电台,不可以在收音机上同时按下两个按钮,而按下其中一耳光后,另一个则跳起来。

  6. 选择框
    1. <select>元素
      常用特性:name、size、multiple
      其他特性:disabled、form、autofocus、required
    2. <option>元素
      常用特性:value、selected、label、disabled
    3. 使用size特性创建滚动选择框
    4. 使用multiple特性选择多个选项
    5. 使用<optgroup>元素分组选项
  7. 文件选择框
    通过type特性值为file<input>元素创建
  8. 隐藏控件
    通过type特性值为hidden<input>元素创建
  9. 新的HTML5表单元素
    1. 使用新的<progress>元素跟踪任务完成度
    2. 使用<meter>元素表示一定范围内标量的测量值
    3. 使用<input>元素及新的<datalist>创建自动完成列表
      用CSS代码来清楚<datalist>引入的箭头
      input::-webkit-calendar-picker-indicator {
          display: none;
        			-webkit-appearance: none;
       }
      

3. 使用<label>元素为控件创建标签

<label>元素带有一个叫做for的特性,用于指明该标签关联的表单控件。for特性的值应该与对应表单控件的id特性值相同

4. 使用<fieldset><legend>元素组织表单结构

  1. <fieldset>元素在表单控件组周围添加边框,以表示它们是相关联元素
  2. <legend>元素允许你为<fieldset>元素指定标题

5. 焦点

元素可通过四种方式获得焦点:
1. 使用定点设备,如鼠标
2. 使用键盘,通常使用Tab键在此类元素间导航定位,顺序由“标签遍历顺序”(tabbing order)指定,特性值tabindex
3. 快捷键(access key)
4. autofocus属性

6. disabled与readonly控件

  • readonly特性防止用户更改表单控件自身的值,可通过脚本修改。任何readonly控件的名称与值仍将发送至服务器
  • disabled特性会禁用表单控件或<fieldset>元素中的表单控件组,从而使用户无法更改,可用脚本重新激活控件。除非控件被重新激活,否则其名称与值不会被发送至服务器

7. 向服务器发送表单数据

  1. HTTP get
  2. HTTP post
Table of Contents