表单应用
效果图
1、表单的属性
<form name="frm" action="./login_page.html" method="POST" target="_blank" enctype="multipart/form-data" >
action=...指跳转到哪里
method=”GET” OR “POST”指表单提交数据的方式 有GET和POST两种
2、文本域、密码域、单选框、多选框、下拉框、提交、复位
文本框<input type="text" name="text" maxlength="10">
Maxlength指能输入最大字符位数
密码域 <input type="password" name="pwd">
复选框 <input type="checkbox" name="enjoy[]" value="2" checked>
Checked表示默认选择什么选项
单选框 <input type="radio" name="sex" value="1" checked>
Checked表示默认选择什么选项
上传图片 <input type="file" name="uploadFile">
文本域
<textarea cols=40 rows=6>在这里输入你的信息</textarea>
Cols表示文本域的宽位40行
Rows表示文本域的高度为6列
下拉列表
<select >
<option value="0">---请选择-</option>
...
<option value="5" selected>55555555</option>
<option value="6">66666666</option>
</select>
Selected表示默认显示的选项
多选列表
<select size=5>
<option value="1">111111</option>
<option value="2">2222222</option>
<option value="3">333333</option>
<option value="4">4444444</option>
<option value="5">55555555</option>
<option value="6">66666666</option>
</select>
Select size=5表示显示5项目列表出来,其他的选项隐藏.
提交数据的样式
按钮 <input type="submit" value="提交">
图片链接 <input type="image" src="login.jpg">
重置 <input type="reset">
按钮 <input type="button" value="清空"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单的应用</title>
</head>
<body background="flower.jpg">
<center><caption>表单的应用</caption><center>
<form name="frm" action="./login_page.html" method="POST" target="_blank" enctype="multipart/form-data" >
<table border="1" width="500" align="center">
<tr>
<th>文本域(<u>u</u>)</th>
<td><input type="text" name="text" maxlength="10"></td>
</tr>
<tr>
<th>密码域</th>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<th>复选框</th>
<td>玩游戏<input type="checkbox" name="enjoy[]" value="1">
看电影<input type="checkbox" name="enjoy[]" value="2" checked>
旅游<input type="checkbox" name="enjoy[]" value="3">
看书<input type="checkbox" name="enjoy[]" value="4" checked>
写字<input type="checkbox" name="enjoy[]" value="5">
</td>
</tr>
<tr>
<th>单选框1</th>
<td>男<input type="radio" name="sex" value="1" checked>
女<input type="radio" name="sex" value="0">
保密<input type="radio" name="sex" value="2">
</td>
</tr>
<tr>
<th>单选框2</th>
<td>男<input type="radio" name="sex1" value="1">
女<input type="radio" name="sex1" value="0" checked>
保密<input type="radio" name="sex1" value="2">
</td>
</tr>
<tr>
<th>上传文件</th>
<td><input type="file" name="uploadFile"></td>
</tr>
<tr>
<th>下拉列表(<u>s</u>)</th>
<td>
<select >
<option value="0">---请选择-</option>
<option value="1">111111</option>
<option value="2">2222222</option>
<option value="3">333333</option>
<option value="4">4444444</option>
<option value="5" selected>55555555</option>
<option value="6">66666666</option>
</select>
</td>
</tr>
<tr>
<th>列表</th>
<td><select size=5>
<option value="1">111111</option>
<option value="2">2222222</option>
<option value="3">333333</option>
<option value="4">4444444</option>
<option value="5">55555555</option>
<option value="6">66666666</option>
</select>
</td>
</tr>
<tr>
<th>多选列表</th>
<td><select size=5>
<option value="1">111111</option>
<option value="2">2222222</option>
<option value="3">333333</option>
<option value="4">4444444</option>
<option value="5">55555555</option>
<option value="6">66666666</option>
</select>
</td>
</tr>
<tr>
<th>多行文本域</th>
<td><textarea cols=40 rows=6>在这里输入你的信息</textarea></td>
</tr>
<tr>
<td colspan=2 align="center">
<input type="submit" value="提交">
<input type="image" src="login.jpg">
<input type="reset">
<input type="button" value="清空" οnclick="document.frm.username.value=""">
</td>
</tr>
</form>
</table>
</body>
</html>