今天来讨论一个网页中经常使用的一个标记——表单标记（form）
那究竟什么是表单呢？
其实表单并不神秘，它是我们网页中很常见的，比如：网页的注册和登陆以及查询都是使用表单写出来的
表单标记<form> 和我们平常见到的一般的标记不太一样，其中需要包含一些输入控件或者其它的标记进行使用
先讲讲<form>的一些属性
action：告诉表单提交数据到哪个地方，一般是和后台进行交互使用，然后对数据进行处理
name：给<form>表单其名字
method：告诉浏览器我表单的提交方式目前会学习到的是get和post（规定用于发送 form-data 的 HTTP 方法。）
get：从效果来说就是将表单中提交的数据显示在网址的后面
post：从效果上讲和get相反，不会讲数据进行显示
具体的差别可以登录http://www.chinaz.com/program/2008/1225/56381.shtml进行查看或者登录W3C官网进行查看
enctype：规定在发送表单数据之前如何对其进行编码。（当需要上传文档时需要使用，否则在和后台进行交互时得不到传说的数据）
| application/x-www-form-urlencoded | 在发送前编码所有字符（默认） |
| multipart/form-data | 不对字符编码。 在使用包含文件上传控件的表单时，必须使用该值。 |
| text/plain | 空格转换为 "+" 加号，但不对特殊字符编码。 |
<form>表单中的属性还有很多，其它的使用很少或者没有特殊性，就不多介绍了，详细可以登陆http://www.w3school.com.cn/tags/tag_form.asp进行查看
接下来讲的时组成<form>表单的输入控件
那什么是输入控件呢？
简单的说就是我们平时看见的输入框等这些需要用户输入和填写的标记
我们一个一个的来介绍我们的输入控件
文本输入框
<input type="text" name="userName" maxlength="10" size="20" />
使用<input>标记，使用属性type赋值为"text"代表该input的元素是一个文本框，name="userName" 是给该文本框取名字，maxlength="10" 代表最大长度（指的是个数） size="20"代表字体大小，还有一个需要大家注意的是/>，我们可以看出input元素应该是一个单标记，在>前加上/是表示该标记的结束，这样便于观察
密码输入框
<input type="password" id="userPsssword" name="userPsssword" maxlength="6" size="20" readonly/>
和文本输入框相同的我就不多讲了，大家注意这个密码输入框的type属性值为password，作用是输入时，将输入的数字变为一个圆点，id和name的意思是相同的，不过id在后面CSS样式中有更重要的作用，还有一个readonly，这句话的意思是，让该输入框变为只读，使其不能输入
说到这里，讲一个在网站上常用的属性placeholder="请输入账号"，其意义在于：在输入框中
出现这种样子，当点击输入框时并没有影响，可以起到提示作用
另：注意先体一个概念，在输入框中输入value="输入"，这个value，会使文本框中出现“输入”这两个字，提交时若不清楚也会一起提交
隐藏表单
<input type="hidden" name="hidTest" value="123"/>
就是想让用户看不见，但是可以起到传递一些信息的作用，在和后台进行数据交互时常用
文本域
<textarea name="txtArea" id="txtArea" cols="20" name="textarea" rows="10"></textarea>
一个可以进行多行输入的输入控件,cols表示宽度，rows表示高度
单选框
<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="famale" checked/>女
<input type="radio" name="sex" value="zhong"/>中
只能选择一个选项，其中type属性值为radio，其中值得注意的是需要进行单选的选项name的值必须一致，这时单选框提交的值为value值中的值，checked是表示默认选定
复选框
<input type="checkbox" name="habit" value="run"/>跑步
<input type="checkbox" name="habit" value="swim"/>游泳
<input type="checkbox" name="habit" value="game"/>游戏
可以选择多个选项，其中type属性值为checkbox，其中同一复选框下得选项的name值必须一致，同样提交的是value的值，当然，也可以使用checked默认选定
下拉框
<select name="selTest" id="selTest" multiple size="2">
<option value="成都">成都</option>
<option value="重庆">重庆</option>
<option value="安徽" selected>安徽</option>
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="广州">广州</option>
</select>
通过下拉框选择值，使用select标记和option标记联合使用，其中下拉框提交的值同样是选定的value的值，select中如果写了有multiple表示可以进行多选，此时使用ctrl进行选定和取消，size表示在下拉框中显示的选项的个数
上传控件
<input type="file" name="fileTest"/>
上传选中的文档，使用时必须在将<form>标记中method的值为post，而且必须写上enctype="multipart/form-data"，写上后在进行数据上传时才能得到数据
提交按钮
<input type="submit" value="提交"/>
提交表单中的数据，其中type的值为submit，默认显示的文字为提交，可以通过value修改
注意，提交时，必须将每个输入控件的name值写上，当为get方法时，可以将数据显示在网址后方，在和后台进行数据交互时需要写上name属性才能将数据传递给后台进行数据交互
重置按钮
<input type="reset" value="重置"/>
点击之后会将表单中的数据初始化（切记并不是清空），同样默认为文字为重置，可以通过value修改
命令按钮
<input type="button" value="确定"/>
其type值为button，一般与JS一起使用，加入点击事件，目标了解即可
还有一些常用的label元素
<label for="userPsssword">跳转</label>
通过for后面的id值，可以跳转到相应的输入控件上（类似于<a>的锚点）
在一个标记中加入tabindex属性
<input type="text" name="userName" maxlength="10" size="20" tabindex="2" />
表示点击tab键时光标的移动顺序
在一个标记中加入accesskey属性
<input type="text" name="userName" maxlength="10" size="20" accesskey="i" />
表示使用alt键+i键直接让光标移动带该输入控件，不过现在很多快捷键和网页、输入法等有重复，故使用很少
readonly和disable属性的区别
readonly表示该输入框只读，不可输入(只能作用于输入框)
disable表示输入控件不可用（可以作用所有的元素）
详细可见http://www.nowamagic.net/html/html_ReadonlyAndDisabled.php
fieldset和legend标记
fieldset会给表单加上一个边框，但一定要和<form>标记的border区分（这是CSS中的内容了解即可）
legend和fieldset是一起使用，在fieldset形成的边框上加上文本
最后写上代码，可以看看
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单</title>
</head>
<body>
<form action="formTest1.html" id="frmTest" method="get" enctype="multipart/form-data">
<fieldset>
<legend>form表单</legend>
<!-- 文本输入框 -->
<p> 姓名：
<input type="text" name="userName" maxlength="10" placeholder="请输入账号" size="20" tabindex="2" /> </p>
<!-- 密码输入框 -->
<p> 密码：
<input type="password" id="userPsssword" name="userPsssword" placeholder="请输入密码" maxlength="6" size="20" readonly/> </p>
<!-- 隐藏表单 -->
<p>
<input type="hidden" name="hidTest" value="123" /> </p>
<!-- 文本域 -->
<textarea name="txtArea" id="txtArea" cols="20" rows="10" tabindex="1" accesskey="i"></textarea>
<!-- 单选框 -->
<p>
<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="famale" checked/>女
<input type="radio" name="sex" value="zhong" />中 </p>
<!-- 复选框 -->爱好：
<p>
<input type="checkbox" name="habit" value="run" />跑步
<input type="checkbox" name="habit" value="swim" />游泳
<input type="checkbox" name="habit" value="game" />游戏 </p>
<!-- 下拉框 -->出生地：
<p>
<select name="selTest" id="selTest" multiple size="2">
<option value="成都">成都</option>
<option value="重庆">重庆</option>
<option value="安徽" selected>安徽</option>
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="广州">广州</option>
</select>
</p>
<p>
<label for="userPsssword">跳</label>
</p>
<!-- 上传控件 -->
<input type="file" name="fileTest" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<input type="button" disabled value="确定" /> </fieldset>
</form>
</body>
</html>
这部分都是需要多去写，多去看和思考的
899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
