10.1表单标记form
<from action="表单的处理方式" name="表单名称" 传送方式="method"
enctype="编码方式" target="目标窗口打开方式">
...
</from>
提交表单action:用于指定表单数据提交到那个地址进行处理
表单名称name:不是必要属性,但是为了防止表单提交到后台处理程序时出现混乱,一般需要给表单命名
method:用于指定在数据提交到服务器的时候使用哪种HTTP提交方法,可取值为get或post
get:表单数据被传送到action属性指定的URL,然后这个新URL被送到处理程序上
post:表单数据被包含在表单主体中,然后被送到处理程序上编码方式:一般为utf-8
target:指定目标窗口的打开方式,表单的目标窗口往往用来显示表单的返回信息
10.2插入表单对象
10.2.1文字字段text
<input name="控件名称" type="text" value="文字字段的默认取值"
size="控件的长度" maxlength="最长字符数" />
10.2.2密码域password
<input name="控件名称" type="password" value="文字字段的默认取值"
size="控件的长度" maxlength="最长字符数" />
10.2.3单选按钮radio
<input name="单选按钮名称" type="radio" value="单选按钮的值"
checked />
在单选按钮中必须设置value的值,对于一个选择列表的所有单选按钮来说,往往要设置为相同的名称,这样在传递时才能更好的对某一个选择内容进行判断,在一个单选按钮组中只有一个单选按钮可以设置为checked
10.2.4复选框checkbox
<input name="复选框名称" type="checkbox" value="复选框的取值"
checked />
复选框可以让用户从一个选项列表中选择超过一个的选项
checked参数表示在默认情况下已经被选中,一个选项列表可以有多个复选框被选中
10.2.5普通按钮button
<input type="submit" name="按钮名称" value="按钮的取值"
onclick="处理程序" />
value的取值就是显示在按钮上的文字,在button属性中可以添加onclick来实现一些特殊的功能
10.2.6提交按钮submit
<input type="submit" name="按钮名称" value="按钮的取值" />
提交按钮被点击可以实现表单内容的提交
10.2.7重置按钮reset
<input type="reset" name="按钮名称" value="按钮的取值" />
清除用户在页面中输入的信息
10.2.8图像域image
<input name="图像域名称" type="image" src="图像路径" />
使用图像作为按钮
10.2.9隐藏域hidden
<input name="隐藏域名称" type="hidden" value="隐藏域的取值" />
传送一些数据对于用户来说不可见,就可以通过一个隐藏域来实现
10.2.10文件域file
<input name="文件域名称" type="file" size="控件的长度" maxlength="最长字符数" />
它用于查找硬盘中的文件路径,然后通过表单将选中的文件上传,在上传图像时也经常用到
10.3菜单和列表
主要是为了节省页面空间
10.3.1下拉菜单
<select name="下拉菜单名称">
<option value="选项值" selected>选项显示内容</option>
...
</select>
选项值是提交表单时的值,而选项显示内容才是真正在页面中显示的选项内容
selected表示该选项在默认情况下是选中的,一个下拉菜单只能有一个默认选项被选中
10.3.2列表项
<select name="列表项名称" size="显示的列表项数" multiple>
<option value="" selected>选项显示内容</option>
...
</select>
size用于设置在页面中显示的最多列表项数,当超过这个值时就会出现滚动条
10.4文本域标记textarea
<textarea name="文本域名称" cols="列数" rows="行数"></textarea>
不能使用value属性建立一个在文本域中显示的初始值。相反,应当在textarea标记的开头和结尾之间包含想要在文本域中显示的内容
10.5id标记
<id="元素的标识名">
用于标识一个唯一的元素,这个元素可以是文字字段,可以是密码域,也可以是其他的表单元素,甚至可以是一副图画,一个表格。取名时候最好根据含义命名
10.6创建表单实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单实例</title>
</head>
<body>
<form name="form1" method="post" action="">
<table width="500" border="0" align="center" cellpadding="0" cellspacing="2">
<!-- 姓名 -->
<tr>
<td width="143" height="25">姓名:</td>
<td width="351"><input name="name" type="text" id="name" size="20"></td>
</tr>
<!-- 年龄 -->
<tr>
<td height="25">年龄:</td>
<td>
<select name="age" id="age">
<option value="5" selected>5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</td>
</tr>
<!-- 性别 -->
<tr>
<td height="25">性别:</td>
<td>
<input name="radiobutton" type="radio" value="radiobutton" checked>男
<input name="radiobutton" type="radio" value="radiobutton">女
</td>
</tr>
<!-- 家庭住址 -->
<tr>
<td height="25">家庭住址:</td>
<td><input name="textfield" type="text" size="40"></td>
</tr>
<!-- 联系电话 -->
<tr>
<td height="25">联系电话:</td>
<td><input name="textfield" type="text" size="15"></td>
</tr>
<!-- 满意度 -->
<tr>
<td height="25">是否满意:</td>
<td>
<input name="checkbox" type="checkbox" value="checkbox">非常满意
<input name="checkbox2" type="checkbox" value="checkbox">一般
<input name="checkbox3" type="checkbox" value="checkbox">非常差
</td>
</tr>
<!-- 意见 -->
<tr>
<td height="25">意见:</td>
<td>
<textarea name="textarea" cols="40" rows="6"></textarea>
</td>
</tr>
<!-- 按钮 -->
<tr>
<td height="25" colspan="2" align="center">
<input name="submit3" type="submit" value="提交">
<input name="submit4" type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>