第十四章 HTML表单
表单的工作方式
表但实际上就是一个包含输入域的Web页面，允许你输入信息。提交表单时，这些信息会打包并发送到一个Web服务器，由一个服务器脚本来处理。处理完成后，会得到另一个Web页面作为相应。服务器脚本由其他编程语言来编写，不在html的范畴之中。
创建表单
可以使用<form>元素创建表单。现在，几乎所有块级元素都有可以放在<form>里，不过还有一组专门用于表单的新元素。这些表单元素可以提供输入不同信息的方法：文本框、复选框、选项菜单等。我们将介绍所有这些元素。
<form>元素不仅包含构成表单的所有元素，还会告诉浏览器当你提交表单时要把表单数据发送到哪里，以及浏览器要用什么方法发送数据：
<form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST"> ... </form>
//action属性包含Web服务器的URL，最后的contest.php是一个用php编写的服务器脚本
//method属性确定表单数据如何发送到服务器。这里是最常用的方法POST，还有另外一个方法GET
那么什么时候使用POST或GET呢？
如果你希望用户能够对提交表单后的结果页面加书签，就不许使用GET，因为如果使用POST，返回的结果页面就无法加书签了。什么时候想要加书签呢？假设你有一个服务器脚本，它会返回一个搜索结果列表，你可能希望用户能够对这些结果加书签，这样他们就能直接查看这些结果，而不用再填写表单。
另一方面，如果你有一个处理订单的服务器脚本，可能不希望用户对这个页面加书签（否则，每次他们返回到这个书签时，都会重新提交这个订单）。
还有一种情况，比如你的表单中的数据是私有的，如信用卡或一个口令。因为URL是明文可以看到，别人只要查看你的浏览器历史，就能看到这些信息。或者如果将GET结果设置了书签，别人也会很容易看到这些私有信息。
还有一种情况，比如你的表单中的数据是私有的，如信用卡或一个口令。因为URL是明文可以看到，别人只要查看你的浏览器历史，就能看到这些信息。或者如果将GET结果设置了书签，别人也会很容易看到这些私有信息。
最后，如果你使用了一个<textarea>，就应该使用POST，因为可能会发送大量数据。GET和POST请求对于发送的数据量都有一个限制，不过对POST请求的限制通常要宽松的多。
表单元素概览
下面简要介绍各种常用的表单元素。先从<input>表单元素开始，它在表单世界里扮演者很多角色。
//文本输入。text<input>元素用于输入一行文本。它还有一些可选属性，允许你为这个控件设置最大字符数和宽度
//使用type属性指示你希望得到一个"文本"输入
<input type="text" name="fullname"> //大多数表单元素都需要一个名字，服务器脚本将使用这个元素名
//<input>元素是一个void元素
//可以使用maxlength属性限制输入的字符数 maxlength="30"
//提交输入。submit<input>元素会创建一个按钮，允许你提交表单。单击这个按钮时，浏览器会把表单发送到
//服务器脚本进行处理。可以使用value属性改变按钮上的文本
<input type="submit" value="提交">
//单选钮输入。radio<input>元素会创建包含多个按钮的控件，但是一次只能选择其中一个按钮。
<input type="radio" name="hotornot" value="hot"> //一组给定选项关联的单选钮必须有相同的名字
<input type="radio" name="hotornot" value="not"> //不过每个选项可以有不同的值
//复选钮输入。checkbox<input>元素会创建一个复选框控件，可以选中也可以不选中。多个复选框可以放在一起，
//如果是这样，你可以根据需要选中多个选项。
<input type="checkbox" name="spice" value="Salt"> //类似于单选钮，对各个选项使用相同的checkbox属性
<input type="checkbox" name="spice" value="Pepper"> //相关的name也用同一个名字
<input type="checkbox" name="spice" value="Garlic"> //每个复选框有一个不同的值
//文本区。<textarea>元素会创建一个多行的文本区，可以在其中输入多行文本。如果输入的文本在文本区中
//放不下，右边还会出现一个滚动条。
<textarea name="comments" rows="10" cols="48"> </textarea>
//<textarea>元素不是一个空元素，所以它有开始和结束标记。使用name属性为元素指定一个唯一的名字。rows
//属性告诉浏览器文本区的高度为多少个字符，cols属性告诉浏览器文本区的宽度为多少个字符，当然也可以在css
//中指定文本区的大小。开始和结束标记之间的所有文本会成为浏览器文本区控件中的初始文本。
//<select>元素会在Web页面中创建一个菜单控件。菜单提供了一种从一组选项中做出选择的方法。通常与<option>
//元素结合使用。<select>创建菜单，<option>创建菜单项
<select name="characters">
<option value="Buckaroo"> Buckaroo Banzai</option>
<option value="Tommy">Perfect Tommy</option>
<option value="Penny">Penny Priddy</option>
<option value="Jersey">New Jersey</option>
</select> //就行其他表单元一样，要用name属性为select元素指定一个唯一的名字
//<option>元素内容用作为菜单项的描述。每个菜单选项还可以包含一个表示这个菜单项的值
//数字输入。number<input>元素会限制只能输入数字。甚至还可以用可选的属性指定这个元素允许的最小数和最大数
<input type="number" min="0" max="10"> //可以使用min和max属性限制允许输入的数字
//范围输入。range<input>元素类似于number，只是它会显示一个滑动条，而不是一个输入框。
<input type="range" min="0" max="20" step="5"> //number和range都有一个可选的step属性，可以用
//来指定值的间隔数(步长)
//颜色输入。使用color<input>元素可以指定一个颜色。单击这个控件时，会弹出一个颜色选择器，允许你选择一个
//颜色，而不必输入颜色名或值。如果浏览器不支持颜色输入元素，你会得到一个常规的文本输入控件。
<input type="color">
//日期输入。使用date<input>元素时，可以利用一个日期选择控件指定日期。这个控件会创建一个合法的日期格式
//串，发送到服务器脚本。与颜色输入类似，如果浏览器不支持日期输入，你会得到一个常规的文本输入控件
<input type="date">
//email、tel、url输入
<input type="email">
<input type="tel">
<input type="url">
//这三种<input>类型都是text<input>的变种。在桌面浏览器上，你看不出任何差别。不过，在移动浏览器上，
//它们会得到一个定制键盘，可以更容易的输入你需要的字符，如/、@和数字。
表单元素名如何工作
关于name属性有一点需要知道：它相当于表单和处理表单的服务器脚本之间的一点黏合剂。
表单中的每个输入控件都有一个name属性。在html文件中输入表单元素时，会为它们指定唯一的名字。
<input type="text" name="name">
<input type="text" name="address">
<input type="text" name="city">
<input type="text" name="state">
name= Buckaroo Banzai
adderess= Banzai Institute
adderess= Banzai Institute
city= Los Angeles
state= CA
如果在一个名为"city"的text中输入了"beijing"，表单提交时，浏览器就会将city="beijing"发送到服务器。
名字是有服务器脚本决定的，所以在写名字之前，要先了解服务器脚本是如何设置名字的。
所有<option>都是<select>的一部分，所以只为<select>设置名字即可
<select name="beans">
<option value="abc"></option>
<option value="cba"></option>
</select>
//在这个例子中，浏览器会向服务器发送beans="abc" 或beans="cba"
一些其他的元素和属性
<label>元素可以提供页面结构的更多信息，使你能更容易地使用css对标签设置样式，另外对于有视力障碍的人，也有助于他们使用的屏幕阅读器更准确地表示表单元素。
<input type="radio" name="hotornot" value="hot" id="hot">
<label for="hot">hot</label>表单变得越来越大时，在视觉上对元素分组会很有帮助。尽管用<div>和css也可以做到，不过HTML还提供了一个<fieldset>元素，可以用来将公共元素组织到一起。<fieldset>又使用了另一个元素<legend>:
<fieldset>
<legend>Condiments</legend>
<input type="checkbox" name="spice" value="salt"> Salt<br/> //我们通常把单选钮和复选钮的
<input type="checkbox" name="spice" value="pepper"> Pepper<br/> //标签放在右边
<input type="checkbox" name="spice" value="garlic"> Garlic<br/>
</sieldset>
//<fieldset>元素包围一组输入元素；<legend>为这一组提供一个标签 password<input>元素的工作与text<input>元素很很类似，只是你输入的文本会加掩码。如果表单中需要输入口令、密码或者其他敏感信息，这个元素就很有用。不过，要记住，表单数据并不会采用一种安全的方式从浏览器发送到服务器脚本（除非你采取了安全措施）。要想提高安全性，请联系你的托管公司。
<input type="password" name="secret"> 向浏览器输入文件可以将type的类型设置为"file"。使用这个属性的前提是必须使用POST方法。
<input type="file" name="doc"> 使用多选菜单可以为<select>元素增加布尔属性multiple，就会把你的菜单变成一个多选菜单。不再显示一个下拉式菜单，你会得到一个多选菜单，在屏幕上显示所有选项。选择时通过同时按下Ctrl(Windows)或Command(Mac)键，可以选择多个选项。
<select name="characters" multiple>
<option> </option>
<option> </option>
<option> </option>
</select>使用placeholder属性为填写表单的人提供一个提示，这个属性的值会显示在控件中，但是比增加到控件的正常内容要浅一些，一旦单击这个文本域，它就会消失。
<input type="text" placeholder="Buckaroo Banzai"> 可以使用required设置控件中的值不允许为空，如果不输入就会提示用户输入。
<input type="text" required>
//是一个布尔属性，所以如果表单控件中有这个属性，说明这个域必须有一个值，表单才能正常提交
1202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
