GongchuangSu
GongchuangSu

Web 前端学习笔记之 HTML 入门（3）

HTML 表单

HTML 表单用于搜集不同类型的用户输入。

标签定义了HTML表单。

<form action="/echo" method="POST" name="myForm">
  <p>用户名：<input type="text" name="username">p>
  <p>密码：<input type="password" name="password">p>
  <p><button type="submit">登录button>p>
form>

form元素中的属性列表

属性 值 描述
accept-charset UTF-8/ISO-8859-1/gb2312 规定服务器可处理的表单数据字符集
action URL 规定当提交表单时向何处发送表单数据
method GET/POST 规定用于发送表单数据的 HTTP 方法
target _blank/_self（默认）/_parent/_top/framename 规定在何处打开 action URL
autocomplete on/off 规定是否启用表单的自动完成功能（默认开启）
name form_name 规定表单的名称
novalidate novalidate 如果使用该属性，则提交表单时不进行验证

说明：

  1. form元素是块级元素，其前后会产生折行
  2. method属性：
    • 如果表单提交是被动的，并且没有敏感信息，一般使用GET（默认方法）；其表单数据在页面地址栏中是可见的
    • 如果表单正在更新数据或者包含敏感信息，一般使用POST；其安全性更加，在页面地址栏中被提交的数据是不可见的

表单设计要领:

  • 帮助用户不出错
  • 尽早提示错误
  • 扩大选择/点击区域
  • 控件较多时要分组
  • 主要动作和次要动作

下面一一介绍 HTML 的表单元素。

input 元素

标签用于搜索用户信息。
元素是最重要的表单元素，它根据不同的type属性值有很多形态。
下表列出了type属性值

type属性值 描述
button 定义可点击按钮
checkbox 定义复选框
file 定义输入字段和 “浏览”按钮，供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段，该字段中的字符被掩码
radio 定义单选按钮
reset 定义重置按钮，重置按钮会清除表单中的所有数据
submit 定义提交按钮，提交按钮会把表单数据发送到服务器
text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符
date 选取日、月、年
month 选取月、年
week 选取周和年
time 选取时间（小时和分钟）
datetime 选取时间、日、月、年（UTC 时间）
datetime-local 选取时间、日、月、年（本地时间）

更多HTML5 Input类型请参照该网站。

其他重要属性如下表所示

属性 值 描述
alt text 定义图像输入的替代文本
autocomplete on/off 规定是否使用输入字段的自动完成功能
autofocus autofocus 规定输入字段在页面加载时是否获得焦点
checked checked 规定此 input 元素首次加载时应当被选中
disabled disabled 当 input 元素加载时禁用此元素（变灰）
maxlength number 规定输入字段中的字符的最大长度
max、min number/date 规定输入字段的最大值、最小值
multiple multiple 如果使用该属性，则允许一个以上的值
pattern regexp_pattern 规定输入字段的值的模式或格式
placeholder text 规定帮助用户填写输入字段的提示
readonly readonly 规定输入字段为只读
required required 指示输入字段的值是必需的
size number_of_char 定义输入字段的宽度
src URL 定义以提交按钮形式显示的图像的 URL
value value 规定 input 元素的值

说明：

  1. 对于 和 ，size 属性定义的是可见的字符数。而对于其他类型，size 属性定义的是以像素为单位的输入字段宽度，它是一个可视化的设计属性
  2. 对于type值为checkbox或radio的input，可以在其外面添加label标签，方便勾选操作
<label>
    <input type="checkbox" name="fruit" value="apple">苹果
label>

更多关于标签的信息可参照该网站。

select 元素

定义和用法
select 元素可创建单选或多选菜单。
<option value ="volvo">Volvooption> <option value ="saab">Saaboption> <option value="opel">Opeloption> <option value="audi">Audioption>

select元素中的属性列表

属性 值 描述
autofocus autofocus 规定在页面加载后文本区域自动获得焦点
disabled disabled 规定禁用该下拉列表
form form_id 规定文本区域所属的一个或多个表单
multiple multiple 规定可选择多个选项
name name 规定下拉列表的名称
size number 规定下拉列表中可见选项的数目