<HeadFirst_HTML与CSS> O'REILLY_Chap.14(完)_HTML表单

<HeadFirst_HTML与CSS> O’REILLY_Chap.14(完)_HTML表单

本博客的FollowMeReading系列初衷是在线的读书笔记. 为方便后期查阅, 故写成博客形式, 使用关键字查询便可以快读的找到相关的内容.

FollowMeReading系列所选的书籍一般选自O’REILLY或Apress出版社, 尽量保证笔记内容的权威性.

FollowMeReading系列的博客标题格式为: <书名> 出版社章节数章节名, 方便大家在纸质版书籍中查找.

FollowMeReading系列博文中的内容大部分是原文, 非原文部分前面将有’博主’字样提醒.

感谢<HeadFirst_HTML与CSS>作者 Eric Freeman & Elisabeth Robson
感谢<HeadFirst_HTML与CSS>翻译 徐阳 丁小峰

本博客由@scott编写. 若转载此文章, 请注明出处和作者

正文

原文

BULLTE POINTS(要点):

• <form> 元素定义了表单, 所有表单输入元素都嵌套在这个元素中.

• action 属性包含服务器脚本的URL.

• method 属性包含发送表单数据的方法, 可以是 POST 或 GET.

• POST 打包表单数据, 并把它作为请求的一部分发送到服务器.

• GET 打包表单数据, 并把数据追加到URL.

• 如果表单数据应当是私有的, 或者表单数据很多, 如使用了一个 <textarea> 或者 file <input> 元素, 就应当使用 POST.

• 对于可以加书签的请求, 要使用 GET.

• <input> 元素在Web页面上可以作为多种不同的输入控件, 这取决于它的 type 属性值.

• type 为 text 时会创建一个单行文本输入框.

• type 为 submit 时会创建一个提交按钮.

• type 为 radio 时会创建一个单选钮. 所有同名的单选钮构成一组互斥的按钮.

• type 为 checkbox 时会创建一个复选框控件. 通过为多个复选框指定相同的名字, 可以创建一组选择.

• type 为 number 时会创建一个只允许数字字符的单行文本输入控件.

• type 为 range 时会创建一个滑动条控件提供数字输入.

• color 类型会在支持这个类型的浏览器中创建一个颜色选择器(否则只会创建一个普通的文本输入控件).

• date 类型会在支持这个类型的浏览器中创建一个日期选择器(否则只会创建一个普通的文本输入控件).

• email , url , tel 类型会创建单行文本输入, 在一些移动浏览器上会出现定制键盘方便数据输入.

• <textarea> 元素会创建一个多行文本输入区.

• <select> 元素会创建一个菜单, 包含一个或多个 <option> 元素. <option> 元素定义了菜单中的菜单项.

• 如果将文本放在 <textarea> 元素的内容中, 这会成为Web页面上文本区控件中的默认文本.

• text <input> 元素中的 value 属性可以用来为单行文本输入控件提供一个初始值.

• 在提交按钮上设置 value 属性可以改变按钮上的显示的文本.

• 提交一个Web表单时, 表单数据值与相应的数据名配对, 所有名和值会发送到服务器.

• 由于表单有一个表格结构, 通常会用CSS表格显示来建立表单布局. CSS还可以用来指定表单的颜色, 字体风格, 边框等样式.

• HTML允许用 fieldset 元素组织表单元素.

• 可以用 <label> 元素以一种有助于提高可访问性的方式关联标签和表单元素.

• 使用 placeholder 属性可以为表单用户提供一个提示, 指出你希望在一个输入域中输入什么内容.

• required 属性指示一个输入域是必要的, 要让表单成功提交, 这个输入域中必须有值. 有些浏览器在你提交表单之前强制要求在这些域中输入数据.