一、HTML表单简介
1.表单是html文档中的一个区域。
2.表单中包含了一系列可交互的元素。
3.表单主要用于收集用户信息。
2.表单中包含了一系列可交互的元素。
3.表单主要用于收集用户信息。
二、表单元素
三、HTML常用表单元素
四、文本输入元素
1.文本输入语速结构:
2.文本输入元素---文本/密码:
代码示例:
<html>
…
<body>
<form action=“#” method=“post”>
<h1>系统登录</h1>
<div>用户名称:
<input type="text" name="username">
</div>
<div>登录密码:
<input type="password" name="password">
</div>
</form>
</body>
</html>
五、单选框元素
1.单选框示例代码及效果
六、复选框元素
1.复选框元素代码示例及效果
七、隐藏域元素
1.隐藏域元素代码示例及效果
八、表单只读/禁用
1.表单只读和禁用属性代码示例及效果
九、文本区输入元素
1.文本区输入元素代码示例及效果
十、下拉选择元素
1.下拉选择元素代码示例及效果
十 一、按钮元素
1.按钮元素代码示例及效果
十二、个人简历网页表格案例
1.代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简历</title>
</head>
<body>
<form action="">
<table border="1" align="center">
<h2 align="center">个人简历</h2>
<tr align="center">
<td style="font-weight:bold;">姓名</td>
<td><input type="text"></td>
<td style="font-weight:bold;">性别</td>
<td><input type="text"></td>
<td style="font-weight:bold;">出生年月</td>
<td><input type="text"></td>
<td rowspan="4"><input type="file" style="font-weight:bold;"></td>
</tr>
<tr align="center">
<td style="font-weight:bold;">民族</td>
<td><input type="text"></td>
<td style="font-weight:bold;">政治面貌</td>
<td><input type="text"></td>
<td style="font-weight:bold;">身高</td>
<td><input type="text"></td>
</tr>
<tr align="center">
<td style="font-weight:bold;">学制</td>
<td><input type="text"></td>
<td style="font-weight:bold;">学历</td>
<td><input type="text"></td>
<td style="font-weight:bold;">户籍</td>
<td><input type="text"></td>
</tr>
<tr align="center">
<td style="font-weight:bold;">专业</td>
<td><input type="text"></td>
<td colspan="2" style="font-weight:bold;">毕业学校</td>
<td colspan="2" style="font-weight:bold;"><input type="text" style="width: 97%; height: 100%"></td>
</tr>
<tr align="center">
<td colspan="7" style="font-weight:bold;">技能、特长或爱好</td>
</tr>
<tr align="center">
<td style="font-weight:bold;">外语等级</td>
<td colspan="2"><input type="text" style="width: 97%; height: 100%"></td>
<td style="font-weight:bold;">计算机</td>
<td colspan="3"><input type="text" style="width: 98%; height: 100%"></td>
</tr>
<tr align="center">
<td colspan="7" style="font-weight:bold;">个人履历</td>
</tr>
<tr align="center">
<td style="font-weight:bold;">时间</td>
<td colspan="2" style="font-weight:bold;">单位</td>
<td colspan="4" style="font-weight:bold;">经历</td>
</tr>
<tr align="center">
<td><input type="text"></td>
<td colspan="2"><input type="text" style="width: 97%; height: 100%"></td>
<td colspan="4"><input type="text" style="width: 98%; height: 100%"></td>
</tr>
<tr align="center">
<td><input type="text"></td>
<td colspan="2"><input type="text" style="width: 97%; height: 100%"></td>
<td colspan="4"><input type="text" style="width: 98%; height: 100%"></td>
</tr>
<tr align="center">
<td><input type="text"></td>
<td colspan="2"><input type="text" style="width: 97%; height: 100%"></td>
<td colspan="4"><input type="text" style="width: 98%; height: 100%"></td>
</tr>
<tr align="center">
<td colspan="7" style="font-weight:bold;">联系方式</td>
</tr>
<tr align="center">
<td style="font-weight:bold;">通信地址</td>
<td colspan="2"><input type="text" style="width: 97%; height: 100%"></td>
<td style="font-weight:bold;">联系电话</td>
<td colspan="3"><input type="text" style="width: 98%; height: 100%"></td>
</tr>
<tr align="center">
<td style="font-weight:bold;">E-mail</td>
<td colspan="2"><input type="text" style="width: 97%; height: 100%"></td>
<td style="font-weight:bold;">邮编</td>
<td colspan="3"><input type="text" style="width: 98%; height: 100%"></td>
</tr>
<tr align="center">
<td colspan="7" style="font-weight:bold;">自我评价</td>
</tr>
<tr align="center">
<td colspan="7"><textarea name="" id="" cols="30" rows="10" style="width: 99%; height: 100%"></textarea></td>
</tr>
</table>
</form>
</body>
</html>
2.运行效果如图:
注:代码使用Chrome浏览器打开,显示效果最佳。