<!DOCTYPE html>
<html>
<head>
<title>表单</title>
<meta charset="utf-8">
<style type="text/css">
*{
font-family: 微软雅黑;
text-align: left;
margin: 5px;
}
td{
height: 30px;
}
textarea{
/*关闭文本域的重置大小的能力*/
resize: none;
}
</style>
</head>
<body>
<!-- 直接布置表单，不容易对齐 -->
<h1>请注册:</h1>
<!-- action 数据传输位置 -->
<!-- method 数据传输方式，post安全性更好,默认为get -->
<!-- 当表单中有文件需要上传时需要加上编码申明：enctype='multipart/form-data'，不然文件不会被传输 -->
<form action="zhuce.php" method="post" enctype='multipart/form-data'>
<p>
<span>用户名：</span>
<input type="text" name="username">
</p>
<p>
<span>密码：</span>
<input type="password" name="password">
</p>
<p>
<span>确认密码：</span>
<input type="password" name="sureword">
</p>
<p>
<span>手机号：</span>
<input type="text" name="phonenumber">
</p>
<p>
<!-- 文件上传 -->
<input type="file" name="文件上传">
</p>
<p>
<input type="submit" value="确认">
<input type="reset" value="重置">
</p>
</form>
<!-- 内嵌表格，易于对齐，配置(中国式做法) -->
<h1>请注册:</h1>
<form action="zhuce.php" method="post">
<table border="0px" cellspacing="0px" width="300px">
<tr>
<td>
用户名：
</td>
<td>
<!-- maxlength 最大长度 -->
<!-- readonly 只读，不能修改，但提交时值会被传输 -->
<!-- disabled 禁用，不能修改，提交时也不会被传输 -->
<input type="text" name="username" maxlength="10" readonly value="初始值">
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td>
确认密码：
</td>
<td>
<input type="password" name="sureword">
</td>
</tr>
<tr>
<td>
手机号：
</td>
<td>
<input type="text" name="phonenumber">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="确认">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
<!-- 从上到下布局，西式做法 -->
<h1>请注册:</h1>
<form action="zhuce.php" method="post">
<p>用户名：</p>
<p><input type="text" name="username"></p>
<p>密码：</p>
<p><input type="password" name="password"></p>
<p>确认密码：</p>
<p><input type="password" name="sureword"></p>
<p>手机号：</p>
<p><input type="text" name="phonenumber"></p>
<p>
<input type="submit" value="OK">
<input type="reset" value="Cancel">
</p>
</form>
<h1>其他</h1>
<form>
<!-- 下拉菜单 -->
<p>选择收货地址</p>
<p>
<select name="城市">
<option value="">请选择</option>
<option value="">北京</option>
<option value="">天津</option>
<option value="">上海</option>
<option value="">深圳</option>
</select>
</p>
<!-- 单选 -->
<p>单选</p>
<p>
<!-- label 的作用是在点击文字部分也能选择 -->
<label><input type="radio" name="sex"> 男 </label>
<label><input type="radio" name="sex"> 女 </label>
</p>
<!-- 多选 -->
<p>多选</p>
<p>
<label><input type="checkbox" name="love[]">篮球</label>
<label><input type="checkbox" name="love[]">排球</label>
<label><input type="checkbox" name="love[]">羽毛球</label>
<label><input type="checkbox" name="love[]">乒乓球</label>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="取消">
</p>
<!-- 文本域 -->
<p>请留言：</p>
<!-- cols 列；rows 行 -->
<textarea name="mess" cols="100" rows="20"></textarea>
</form>
</body>
</html>
