表单在网页中随处可见。
我们来做一个表单出来，来综合理解一下表单。
1，创建表单
在HTML中，< form >标记用于定义表单域，即创建一个表单，基本语法如下:
<form action="url地址" method="提交方式" name="表单名称">
</form>
其中，action属性用于指定表单提交的地址，提交之后表单的数据会交给地址对应的内容去做。比如javaweb中的“login.jsp”。method属性用于设置表单数据的提交方式，取值有GET和POST。其中，GET为默认值这种方式提交的数据将显示在浏览器的地址栏中，保密性差且数据量小。而POST提交方式不但保密性好，还可以提交大量数据，所以开发中通常使用POST方式提交表单。
2，表单控件
网页中的表单，使用< input />控件来定义单行文本输入框，单选按钮，复选框，重置按钮等。语法如下：
<input type="控件类型" />
在上述语法中，type属性为其最基本的属性，取值有多重，用来指定不同的控件类型。除了type属性外，< input />控件还可以定义很多种其他属性，其中，比较常用的如id，name，value，size，它们分贝用来指定input控件的ID值，名称，控件中的默认值和控件在页面中的显示宽度。
下面来一个例子
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单example</title>
</head>
<body>
<fieldset>
<legend>注册新用户</legend>
<!-- 表单提交地址为#，表单数据的提交地址方式为POST -->
<form action="#" method="post">
<table cellpadding="2" align="center">
<tr>
<td align="right">用户名:</td>
<td>
<!-- 1.文本输入框控件 -->
<input type="text" name="username" />
</td>
</tr>
<tr>
<td align="right">密码:</td>
<!-- 2.密码输入框控件 -->
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td align="right">性别:</td>
<td>
<!-- 3.单选输入框控件，由于无法输入value, 所以预先定义好 -->
<input type="radio" name="gender" value="male" /> 男
<input type="radio" name="gender" value="female" /> 女
</td>
</tr>
<tr>
<td align="right">兴趣:</td>
<td>
<!-- 4.复选框控件 -->
<input type="checkbox" name="interest" value="film" /> 看电影
<input type="checkbox" name="interest" value="code" /> 敲代码
<input type="checkbox" name="interest" value="game" /> 打网球
</td>
</tr>
<tr>
<td align="right">头像:</td>
<td>
<!-- 5.文件上传控件 -->
<input type="file" name="photo" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<!-- 6.提交按钮控件 -->
<input type="submit" value="注册" />
<!-- 7.重置按钮控件，单击后会清空当前form -->
<input type="reset" value="重填" />
</td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>
//output：
在上述例子中，name控件属性代表控件名称，value属性表示该控件的值。要注意的是，单选框控件和复选框控件必须指定相同的name值，这是为了方便在处理页面数据时获取表单传递的值（表单所传递的值就是该控件指定相同的value值）。
上述代码中，还使用了< fieldset >和< legend >标记。< fieldset >标记的作用是将表单内的元素分组，而< lengend >标记则为< fieldset >标记定义标题。
1534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
