【HTML】3.Form表单
标签
表单元素 |
标签 |
描述 |
文本框 |
<INPUT TYPE=‘text’ …> |
输入一行文本 |
密码 |
<INPUT TYPE=‘password’ …> |
输入一行文本，但不可见，只以星号显示 |
单元按钮 |
<INPUT TYPE=‘radio’ …> |
只能选择一个选项 |
复选框 |
<INPUT TYPE=‘checkbox’ …> |
可以选择一个或多个选项 |
隐藏域 |
<INPUT TYPE=‘hidden’ …> |
该域的值对用户不可见，但会提交给服务器 |
下拉列表 |
<SELECT …> <OPTION …> … </OPTION> (可以放多个option) </SELECT> |
|
文本域 |
<TEXTAREA …>…</TEXTAREA> |
可以输入多行文本 |
提交按钮 |
<INPUT TYPE=‘submit’> |
提交表单 |
普通按钮 |
<INPUT TYPE=‘button’> |
|
重置按钮 |
<INPUT TYPE=‘reset’> |
重置表单信息 |
介绍
基本功能：收集用户填写的数据，然后提交到服务器上。
要提交数据的表单域必须加name属性。不然，该表单域的数据不会提交到服务器上。
文本框：
<inputtype="text" name="uname" value="333" size="30" maxlength="10" />
密码框：（跟文本框的用法基本一致，除了页面上以星号显示）
<inputtype="password" name="pwd" />
单选按钮(用于多选一的情况)：
性别：
<input type="radio"name="gender" value="1" />男
<inputtype="radio" name="gender" value="0" />女
1.单选按钮是分组的， name相同即为一组。 一组只能选中一个按钮。
2.value：如果不增加value属性，选中该按钮提交时默认为：on，而不是空字符串。所以，建议大家使用单选按钮一定要指定value.
复选框(用于多选多的情况)：
喜欢编程语言：
<br />
<inputtype="checkbox" name="favorite"/> JAVA
<inputtype="checkbox" name="favorite"value="2"/> C++
<inputtype="checkbox" name="favorite"value="3"/> RUBY
<inputtype="checkbox" name="favorite"value="4"/> C
3.复选框是分组的， name相同即为一组。 可同时多个复选框
4.value：如果不增加value属性，选中该按钮提交时默认为：on，而不是空字符串。
5.选中的选项会被传递成多个同名不同值的参数。
下拉列表（实现多选一 或多选多的效果。）：
国籍：
<br />
<selectname="country" multiple>
<option>China</option>
<optionvalue="2">America</option>
<optionvalue="3">France</option>
</select>
1.当<option>没有指定value属性。如果被选中，则提交<option>中的提示文本，而不是On或空字符串。
注：单选按钮、复选框默认选中用：checked属性。 下拉列表使用：selected属性。
隐藏域：<input type="hidden" name="hid"value="55"/> <br />
多行文本域：
<textareaname="introduce" rows="4" cols="40"> </textarea>
重置按钮：将各表单域的值恢复为默认值。
提交按钮：提交表单数据。
图片按钮：提交表单数据，通过单击指定的图片提交表单。例如：
<inputtype=image src=”1.jpg” />
form表单：form: 表单域，用来收集用户信息。
action:表单数据提交给谁
method：提交方式
file:///D:/总结/HTML--20160410/HTML-form-01.html?uname=akali&pwd=123123
get方法：拼接在URL后面，数据可见，并且不安全，数据量小。
特点：使用问号拼接在URL后面，键值对的形式，键值对使用&隔开。
Post方法：安全，信息量大。
依靠name属性来决定数据是否提交。
1、 使用radio属性时，要注意 组的概念，组是由name属性来控制
同一name同一组并且一组只能选择一个
2、 使用radio属性时，要注意value的值，要求同一组value的值不同
一般建议使用阿拉伯数字。
Demo<html>
<head>
<title>form表单标签</title>
<meta charset="utf-8"/>
</head>
<body>
<form action="#"method="get">
<tableborder="2px" width="600px"height="100px">
<tr>
<th>用户名</th>
<td>
<inputtype="text" name="uname" value="akali" />
</td>
</tr>
<tr>
<th>密码</th>
<td>
<inputtype="password" name="pwd" />
</td>
</tr>
<tr>
<th>确认密码</th>
<td>
<input type="password"name="confpwd" value="" />
</td>
</tr>
<tr>
<th>手机号码</th>
<td>
<inputtype="text" name="phoneNum" value="" />
</td>
</tr>
<tr>
<th>性别</th>
<td>
<inputtype="radio" name="sex" value="1"checked="checked"/>男
<inputtype="radio" name="sex" value="2" />女
</td>
</tr>
<tr>
<th>是否有车</th>
<td>
<inputtype="radio" name="car" value="1" />有
<inputtype="radio" name="car" value="2" />否
</td>
</tr>
<tr>
<th>爱好</th>
<td>
<inputtype="checkbox" name="fav" value="1" />唱歌
<inputtype="checkbox" name="fav" value="2" />跳舞
<inputtype="checkbox" name="fav" value="3" />跑步
<inputtype="checkbox" name="fav" value="4" />旅游
<inputtype="checkbox" name="fav" value="5" />睡觉
</td>
</tr>
<tr>
<th>籍贯</th>
<td>
<selectname="adress">
<optionvalue="1">--请选择--</option>
<optionvalue="2" selected="selected">北京</option>
<optionvalue="3">大连</option>
<optionvalue="4">郑州</option>
</select>
</td>
</tr>
<tr>
<th>语言</th>
<td>
<selectname="language" multiple="multiple">
<optionvalue="1">--请选择--</option>
<optionvalue="2">JAVA</option>
<optionvalue="3">C</option>
<optionvalue="4">C++</option>
</select>
</td>
</tr>
<tr>
<th>自我介绍</th>
<td>
<textareaname="texta" rows="10" cols="30">这里需要写你的个人介绍</textarea>
</td>
</tr>
<tr>
<tdcolspan="2" align="center">
<inputtype="checkbox" name="agree" value="1" />是否同意本公司的协议
</td>
</tr>
<tr>
<tdcolspan="2" align="center">
<inputtype="submit" value="提交注册" />
<inputtype="reset" value="重置" />
</td>
</tr>
<tr>
<th>普通按钮</th>
<td>
<inputtype="button" name="" value="普通按钮" />
</td>
</tr>
</table>
</form>
</body>
</html>
业务思想
Form表单是学习HTML中很重要的一项，尤其对于前台和后台交互的设计人员来讲，更是要很熟悉表单的使用和设计。
总体来讲，form表单挺简单的，但是要细心每一步的设计、每一个操作。多去练习使用，受用无穷。