<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<!-- form是表单元素 -->
<form>
<!-- p是段落标签 input是文字域标签-->
<p>名：<input type="text" /></p>
<p>姓：<input type="text" /></p>
</form>
</body>
</html>
1-9省略
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<h1 align="center">注册信息</h1>
<hr color="#336699" />
<form>
<table width="600px" bgcolor="#f2f2f2" align="center">
<tr>
<td>用户名：</td>
<!-- maxlength代表最大输入数 size代表文本框宽度-->
<td><input type="text" name="username" size="25" maxlength="6" placeholder="请输入用户名"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码"/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="paw_comfirm" size="25" maxlength="6" placeholder="请重新输入密码"/></td>
</tr>
<tr>
<td>上传照片：</td>
<!-- file是上传文件类型-->
<td><input type="file" /></td>
</tr>
</table>
</form>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<form>
性别:
<!-- radio是单选类型,同组name要相同,checkbox是多选类型,同组name最好相同,以便服务器区分,value是要传给服务器的值-->
男<input type="radio" name="sex" value="man"/>
女<input type="radio" name="sex" value="woman"/><br />
我喜欢的水果:<br />
<input type="checkbox" name="fruit" value="apple"/>苹果<br />
<input type="checkbox" name="fruit" value="pear"/>梨子<br />
<input type="checkbox" name="fruit" value="peach"/>桃子<br />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1 align="center">注册信息</h1>
<hr color="#336699">
<form>
<table bgcolor="#f2f2f2" width="600px" align="center" >
<tr><td>用户名：</td><td><input type="text" name="username" size="25" maxlength="6" placeholder="请输入用户名"/></td></tr>
<tr><td>密码：</td><td><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码"/></td></tr>
<tr><td>确认密码：</td><td><input type="password" name="paw" size="25" maxlength="6" placeholder="请重新输入密码"/></td></tr>
<tr><td>上传照片：</td><td><input type="file" name="file"/></td></tr>
<!-- checked代表默认选中-->
<tr><td>性别：</td><td><input type="radio" name="sex" value="man"/>男<input type="radio" name="sex" value="woman" checked/>女</td></tr>
<tr><td>爱好：</td><td><input type="checkbox" name="sport" value="basketball" checked/>篮球<input type="checkbox" name="sport" value="football"/>足球<input type="checkbox" name="sport" value="volleyball"/>排球</td></tr>
</table>
</form>
</body>
</html>
2-17省略
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1 align="center">注册信息</h1>
<hr color="#336699">
<form>
<table bgcolor="#f2f2f2" width="600px" align="center">
<tr>
<td>用户名：</td>
<td><input type="text" name="username" size="25" maxlength="6" placeholder="请输入用户名" /></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="paw" size="25" maxlength="6" placeholder="请输入密码" /></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="paw" size="25" maxlength="6" placeholder="请重新输入密码" /></td>
</tr>
<tr>
<td>上传照片：</td>
<td><input type="file" name="file" /></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" value="man" />男
<input type="radio" name="sex" value="woman" checked="checked" />女
</td>
</tr>
<tr>
<td>爱好：</td>
<td><input type="checkbox" name="fx" value="basketball" checked="checked" />篮球<input type="checkbox" name="fx" value="football" />足球<input type="checkbox" name="fx" value="volleyball" />排球</td>
</tr>
<tr>
<td>
<!-- button是普通按钮 submit是提交按钮 reset是重置按钮-->
<input type="button" value="点我"/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>表单</title>
<meta charset="utf-8">
</head>
<body>
<form>
下拉菜单：<br />
<!-- select代表下拉或列表菜单 option代表菜单项 size代表列表项展示个数 multiple可设置多选-->
<select>
<option>熊猫</option>
<option>猫</option>
<option>狗</option>
<option>猪</option>
<option>猴子</option>
</select>
<br /><br />
列表：<br />
<select size="3" multiple>
<option>苹果</option>
<option>香蕉</option>
<option>橙子</option>
<option>桃</option>
<option>梨</option>
</select>
</form>
</body>
</html>
2-24省略
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<form>
<select>
<option>请选择：</option>
<!-- optgroup代表分组 label是分组名称-->
<optgroup label="水果">
<option>苹果</option>
<option>猕猴桃</option>
<option>杏子</option>
</optgroup>
<optgroup label="蔬菜">
<option>西红柿</option>
<option>白菜</option>
<option>油麦菜</option>
</optgroup>
</select>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>表单</title>
<meta charset="utf-8">
</head>
<body>
请作自我介绍：<br />
<!-- textarea是多行文本域 rows是可展示行数 cols是可展示字符数(大约)-->
<textarea rows="3" cols="20" placeholder="请在此处介绍自己..."></textarea>
</body>
</html>
网友评论