表单常见功能补全（代码+注释）
2015-11-17 09:07
411 查看
<html>
<head>
<title>表单</title>
</head>
<body>
<form method="post" enctype="multipart/form-data" >
<table border="1" align="center">
<caption>请填写以下内容</caption><!-- 注意位置 -->
<tr>
<th>用户名</th>
<td><input type="text" size="30" maxlength="10" value="username"></td><!-- maxlength限定文本长度 value值表示初始值 -->
</tr>
<tr>
<th>密码</th>
<td><input type="password" size="30" maxlength="10" value="123456"></td><!-- maxlength限定密码长度 value值表示初始值 -->
</tr>
<tr>
<th>爱好</th> <!-- 复选框 -->
<td>
<input type="checkbox" checked >玩游戏 <!-- checked表示默认被选中 -->
<input type="checkbox">听音乐
<input type="checkbox">运动
<input type="checkbox" checked >睡觉 <!-- checked表示默认被选中 -->
</td>
</tr>
<tr>
<th>性别</th> <!-- 单选框 --><!-- 单选框中必须要有组名否则不能被选中，如下列将name值设为sex -->
<td>
<input type="radio" checked name="sex">男 <!-- checked表示默认被选中 -->
<input type="radio" name="sex" >女
<input type="radio" name="sex" >保密
</td>
</tr>
<tr>
<th>上传文件</th><!-- 两点注意：1.method="post" 2.enctype="multipart/form-data" -->
<td>
<input type="file" name="picture">
</td>
</tr>
<tr>
<th>下拉列表</th>
<td>
<select name="">
<option selected >--请选择--</option><!-- slected表示默认被选择 -->
<option value="1" >1</option><!-- 加value值提交就是提交value的值，不加就是提交两个option之间的元素 -->
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td>
</tr>
<tr>
<th>列表</th>
<td>
<select name="" size="3"><!-- size值表示显示的数目 看不见的部分用滚动条下拉 -->
<option selected >0</option><!-- slected表示默认被选择 -->
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<tr>
<th>多选列表</th>
<td>
<select name="" size="3" multiple ><!-- size值表示显示的数目看不见的部分用滚动条下拉，按ctrl或shift进行多选 -->
<option>0</option>
<option selected >1</option><!-- slected表示默认被选择 -->
<option>2</option>
<option selected >3</option><!-- slected表示默认被选择 -->
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<tr>
<th>多行文本域</th>
<td>
<textarea cols="40" rows="6" name="">在这里输入个人简介</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="提交"><input type="reset"></td><!-- value值表示按钮显示内容 -->
</tr>
</table>
</form>
</body>
</html>
<head>
<title>表单</title>
</head>
<body>
<form method="post" enctype="multipart/form-data" >
<table border="1" align="center">
<caption>请填写以下内容</caption><!-- 注意位置 -->
<tr>
<th>用户名</th>
<td><input type="text" size="30" maxlength="10" value="username"></td><!-- maxlength限定文本长度 value值表示初始值 -->
</tr>
<tr>
<th>密码</th>
<td><input type="password" size="30" maxlength="10" value="123456"></td><!-- maxlength限定密码长度 value值表示初始值 -->
</tr>
<tr>
<th>爱好</th> <!-- 复选框 -->
<td>
<input type="checkbox" checked >玩游戏 <!-- checked表示默认被选中 -->
<input type="checkbox">听音乐
<input type="checkbox">运动
<input type="checkbox" checked >睡觉 <!-- checked表示默认被选中 -->
</td>
</tr>
<tr>
<th>性别</th> <!-- 单选框 --><!-- 单选框中必须要有组名否则不能被选中，如下列将name值设为sex -->
<td>
<input type="radio" checked name="sex">男 <!-- checked表示默认被选中 -->
<input type="radio" name="sex" >女
<input type="radio" name="sex" >保密
</td>
</tr>
<tr>
<th>上传文件</th><!-- 两点注意：1.method="post" 2.enctype="multipart/form-data" -->
<td>
<input type="file" name="picture">
</td>
</tr>
<tr>
<th>下拉列表</th>
<td>
<select name="">
<option selected >--请选择--</option><!-- slected表示默认被选择 -->
<option value="1" >1</option><!-- 加value值提交就是提交value的值，不加就是提交两个option之间的元素 -->
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td>
</tr>
<tr>
<th>列表</th>
<td>
<select name="" size="3"><!-- size值表示显示的数目 看不见的部分用滚动条下拉 -->
<option selected >0</option><!-- slected表示默认被选择 -->
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<tr>
<th>多选列表</th>
<td>
<select name="" size="3" multiple ><!-- size值表示显示的数目看不见的部分用滚动条下拉，按ctrl或shift进行多选 -->
<option>0</option>
<option selected >1</option><!-- slected表示默认被选择 -->
<option>2</option>
<option selected >3</option><!-- slected表示默认被选择 -->
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<tr>
<th>多行文本域</th>
<td>
<textarea cols="40" rows="6" name="">在这里输入个人简介</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="提交"><input type="reset"></td><!-- value值表示按钮显示内容 -->
</tr>
</table>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 通过Mootools 1.2来操纵HTML DOM元素
- WEB标准网页布局中尽量不要使用的HTML标签
- Flash 与 html 的一些实用技巧
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- C#自写的一个HTML解析类（类似XElement语法）
- 没有文件大小限制并免费的PDF到HTML转换工具
- JavaScript与HTML结合的基本使用方法整理
- css实现气泡框效果(实例加图解)
- html链接与文本标签们
- html活用软字符连接符
- 浅谈html中id和name的区别实例代码
- HTML <!DOCTYPE> 标签
- asp中实现清除html的函数
- Android的TextView与Html相结合的具体方法
- jQuery设置和获取HTML、文本和值示例
- 『jQuery』.html(),.text()和.val()的概述及使用
- php正则替换处理HTML页面的方法