Learn web development

HTML表单指南

This guide is currently under active writing and can change at any time. Feel free to provide any kind of feedback to Jeremie

欢迎进入HTML表单指南。这个指南是一系列的文章帮助你掌握HTML表单。HTML表单是用户交互中非常强大的工具，然而，由于历史和技术原因，怎样使用它们的全部潜能并不总是那么明显。这个指南将囊括HTML表单的所有方面，从结构到样式，从数据处理到定制小部件。你将学会享用它们提供的强大功能。

文章

  1. 第一个HTML表单
  2. 怎么样构架HTML表单
  3. 本地HTML表单组件
  4. HTML表单的CSS
    1. HTML表单样式
    2. HTML表单高级样式
    3. 表单组件的特性兼容table
  5. 发送和兼容表单数据
  6. 表单数据验证
  7. 怎样创建定制表单小部件
  8. 通过JavaScript发送表单
    1. 使用FormData对象
  9. 遗留浏览器中的表单

HTML文档

HTML 元素

元素 相关DOM接口 描述
<button> HTMLButtonElement button元素表示一个可点击的按钮。
<datalist> HTMLDataListElement

datalist元素包含一组 <option> 元素，表示其它表单元素的可能值。
<fieldset> HTMLFieldSetElement

fieldset元素用于将几个表单元素分组到一个form。
<form> HTMLFormElement

form元素表示文档的一部分，包含使用户通过web浏览器提交信息的交互元素。
<input> HTMLInputElement

input元素用于创建表单的交互控件。
<keygen> HTMLKeygenElement

keygen元素促进key material的产生，以及公共密钥作为HTML表单的提交。
<label> HTMLLabelElement

label元素表示用户界面中的一个条目的标题。
<legend> HTMLLegendElement

legend元素表示它的父级<fieldset>元素内容的标题。
<meter> HTMLMeterElement

meter元素表示一个可知范围的标量值或分数值。
<optgroup> HTMLOptGroupElement

optgroup元素创建<select>元素中的选项集。
<option> HTMLOptionElement

HTML的option元素用来创建一个控件，表示<select>，<optgroup>或<datalist>元素中的一个条目。
<output> HTMLOutputElement

output元素表示计算结果。
<progress> HTMLProgressElement

progress元素用来查看任务的完成进展。
<select> HTMLSelectElement select元素表示展示选项菜单的控件。
<textarea> HTMLTextAreaElement textarea元素表示一个多行明文可编辑控件。

注意：所有表单元素，作为HTML元素，支持HTMLElementDOM接口。

HTML属性

属性名 元素 描述
accept <form>, <input> 服务器接受的类型列表，通常是一个文件类型。
accept-charset <form> 支持的字符集列表。
action <form> 一个程序URI，用于处理通过表单提交的信息。
autocomplete <form>, <input> 表示表单控件是否有由浏览器自动完成的默认值。
autofocus <button>, <input>, <keygen>, <select>, <textarea> 当页面加载完成该元素应自动聚焦。
challenge <keygen> challenge字符串与公钥一起提交。
checked <input> 表示当页面加载时元素是否应该被检查。
cols <textarea> 定义textarea的列数。
data <object> 指定源的URL。
dirname <input>, <textarea>  
disabled <button>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> 表示用户是否可以与元素交互。
enctype <form> 定义当method为POST时表单数据的内容类型。
for <label>, <output> 定义元素属于此。
form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> 定义拥有此元素的表单。
high <meter> 定义范围的下限。
keytype <keygen> 指定密钥生成的类型。
list <input> 标识显示给用户的预定义选项列表。
low <meter> 表示下范围的上限。
max <input>, <meter>, <progress> 表示允许的最大值。
maxlength <input>, <textarea> 定义元素允许的字符串最大个数。
method <form> 定义提交表单时的HTTP method。可以为GET（默认值）或POST。
min <input>, <meter> 表示允许的最小值。
multiple <input>, <select> 表示email或file类型的input是否可输入多值。
name <button>, <form>, <fieldset>, <input>, <keygen>, <output>, <select>, <textarea> 元素名称。例如，服务器用来识别表单中的字段。
novalidate <form> 此属性表示当提交表单时不需要验证。
optimum <meter> 表示最优数值。
pattern <input> 定义验证元素值时的正则表达式。
placeholder <input>, <textarea> 为用户提供字段输入提示。
readonly <input>, <textarea> 表示元素是有可编辑。
required <input>, <select>, <textarea> 表示此元素是否需要填写。
rows <textarea> 定义textarea的行数。
selected <option> 定义当页面加载时选择的值。
size <input>, <select> 定义元素的宽度（单位为像素）。如果元素类型为text或password，此值将是字符串的个数。
src <input> 可嵌入内容的URL。
step <input>  
target <form>  
type <button>, <input> 定义元素的类型。
usemap <input>  
value <button>, <option>, <input>, <meter>, <progress> 定义页面加载时显示的默认值。
wrap <textarea> 表示文本是否应被包装。

参考标准

文档标签和贡献者