前面，我们已经总结过html的一些基础，现在让我们来总结一下html表单吧；
前面我们学习的都是一些简单的，网页显示给我们看的，而我们不能在上面进行操作；然而我们很多时候都需要和服务器进行互动，这是我们需要有一个能让我们和服务器互动的界面，让他知道我们想要做什么，这时我们就要用到表单了；
1、<form> </form>：
表单定义标记；表单里面的控件必须写在form内，form标记里还能嵌套很多标记，比如前面前面讲过的那些几乎都能嵌套，就相当于body标记一样。form标记只能放在body标记内，form标记内部能再次嵌套form标记。
格式:<form action="表单处理程序的url" method="get/post">
action：定义一个url，来指定表单中的数据应该被发送到那里处理，即该属性的值是一个表单数据程序的url。
method：用户控制数据是如何发送到处理程序的。有get和post两个值，这两个值和相同名字的http协议有关。
二、输入控件：
<html>
<head><title>创建表单示例——文本框</title></head>
<body>
<form id="myform" name="myform" action="#"method="post">
<p>姓<input type="text" id="firstname" /></p>
<p>名<input type="text" id="lastname" /></p>
</form>
</body>
</html>
input：创建一个文本框。上面我们已经看了他的格式，仔细点会发现input常和type属性一起使用，这是因为，我们常用type属性定义不同的控件，比如type=“text”时是文本框，就是我们常用来输入文字的那种，文本框又分为单行文本框和多行文本框，这后面会讲到的。当type=“password”时是口令输入框，就是我们常输入密码的那种。当type=“checkbox”时是复选框，就是多项选择。当type=“radio”时是单选框，这就是单选了。 当type=“file”时又是定义的文件上传控件，就是我们常传图片上QQ空间要用的那玩意儿。
我们还可以用size和maxlength属性来控制文本框的长度和能够输入的最大字符。当我们需要设置一个默认值是可以用value属性，
比如：<input type="text" size="35" id=" "maxlength="20" value="王小荣"/>就是创建一个35px和能够输入20个字符，默认输入的是王小荣的文本框。
<input type="password" id=" " value="123">创建的是一个口令输入框默认口令是 123.
2、复选框和单选框：
复选：checkbox；
单选：radio；
先看一段代码；
<form id="myform" name="myform" action="#"method="post">
<p>请选择你想去的城市</p>
<p>
<input type="checkbox" name="city" id="sh" value="shanghai" checked="checked">上海</input><br />
<input type="checkbox" name="city" id="cd" value="chengdu">成都</input><br />
<input type="checkbox" name="city" id="bj" value="beijing">北京</input><br />
</p>
<p>请选择你的性别</p>
<p>
<input type="radio" name="gender" id="male" value="male" checked="checked">男</input><br />
<input type="radio" name="gender" id="female" value="female">女</input><br />
</p>
</form>
上面的这段代码是一个多选和一个单选，默认城市是“上海”性别是“男”所以这里的默认值不再由value决定而是由checked决定，
这里，我们使用id和name给每一个选项一个名称，使用value属性指定用户选定某一个选项时返回的值。
复选框和单选框中的每个选项的name属性使用了相同的设置，但是每个选项的id 和value属性是不同的。
给每个选项的name属性使用相同设置，是让浏览器知道这些选项时一个组。
在html中，一个组中的元素的name属性值是必须相同的，而id属性值不能相同。
3、文件上传控件：
<form id="myform" acction="#" method="post" enctype="form/multipart">
<p>请上传你的照片</p>
<input type="file" id="photo" />
</form>
可以看出代码格式和前面没多大区别，值得一提的是；使用此控件我们必须在form标记里指定form的enctype属性为；form/multipart以允许要上传的文件与其他数据附带在一起传递。method属性设置为post而不是get。
4、下拉列表：
下拉列表用select和option标记，一个select来容纳列表，多个option标记集合来标示列表选项。
<form>
<p>你最喜欢的餐饮风格</p>
<select name="food" id="food" multiple="multiple" size="3">
<option value="sichuan">川菜</option>
<option value="guangdong">粤菜</option>
<option value="west" selected="selected">西餐</option>
<option value="beifang">北方菜</option>
<option value="shanghai">上海菜</option>
</select>
</form>
默认情况下下拉列表只允许依次从列表中选择一个选项，但有时我们却希望一次选多个，这时，我们就必须在select标记里增加multiple属性来定义多个选项。我们还可以用size属性来设置下拉列表一次显示的选项个数。
上面的代码是默认选择西餐的、下拉列表能同时显示3个选项的可多选的下拉列表。
5、多行文本框：
<textarea></textarea>：定义一个能够输入多行文本的文本框；其中用rows和columns这两个属性来设置他的宽和高；
格式：
<form id="myform" name="myform" action="#" method="post">
<textarea rows="10" columns="30" id="comment">请在此输入文本<textarea>
</form>
6、提交和重置按钮：
submit：提交
reset：重置
格式：<input type="submit" value="提交" />
<input type="reset" value="重置" />
用自定义的图片来代替按钮
<input type="image" src=submit.gif" value="submit" alt="发送" />
将type属性设置为image，并且指定图片的路径然后再设置他的value属性即可，alt属性是当鼠标指在图片上时显示的提示文字或者当图片不能显示时显示的文本。
7、命令按钮：
button：和提交和重置按钮一样，主要区别在于它不能提交或重置表单数据他只是一个普通的按钮，当然我们可以为他写一个按钮事件处理程序让他实现一些功能。
格式：<input type="button" value="增加" />
8、其他表单标记和属性：
- <lable for="相关标记的id">标签文本</lable>
- tab次序和键盘快捷键：<input type="text" id="firstname" value=" " size="30" tabindex="3" accesskey="F" />这个前面已经讲过就不再重复。
- fieldset和legend标记：fieldset标记被用作表单元素的一个容器，他在被包含的元素的周围显示一个细边框的盒子。legend元素放在fieldset内部，在盒子上加一个标题。
如：
<fieldset>
<p>
<legend>性别</legend>
<input type="radio" name="gender" id="male" value="male" checked="checked">男</input><br />
<input type="radio" name="gender" id="female" value="female">女</input><br />
</p>
</fieldset>
扫一扫
102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
