html,form表单标签的运用
- form标签
- 文本表单
- 单选表单
- 复选框
- 下拉选项框
- 提交、重置哦、普通按钮
- 文本域
- 文件表单
form标签
所有的表单标签都需要放在form标签里面,有助于将表单数据传输给服务器。
<form action="image_01163邮箱.html" method="get">
<label for="email">电子邮箱:</label><input type="email" name="email" id="email" value=""/>
<br><br>
<label for="password">设置密码:</label><input type="password" name="password" id="password" value=""/>
<br><br>
<label for="truename">真实姓名:</label><input type="truename" name="truename" id="truename" value=""/>
<br><br>
</form>
让lable标签指向email的话,点击图片中的“电子邮箱”文字同样可以让鼠标的光标指向文本框。
以上代码效果可以实现下图圈中部分
单选框 type=“radio”
<label>姓别:</label>
<input type="radio" name="gender" id="boy" value="" /><label for="boy">男</label>
<input type="radio" name="gender" id="girl" value="" /><label for="girl">女</label>
<br><br>
<label>生日:</label>
下拉表单 select > option
<select>
<option value ="">请选择身份</option>
<option value ="">学生</option>
<option value ="">白领</option>
<option value ="">领导</option>
<option value ="">公众人物</option>
</select>
如果想要默认选择“学生”,可以加上selected=“selected”
<option value ="" selected="selected">学生</option>
像selected="selected"这种前后相同的情况,我们可以写成下面这样
<option value ="" selected>学生</option>
都是实现同样的效果
提交按钮、以及图片提交按钮
普通提交按钮 <input type="submit" value="提交"/>
图片提交按钮 <input type="image" src="../img/renren.gif" />
传输给服务器的内容
提交的相关信息
method=“get”(可在浏览器中看见传输给服务器的内容,最大能传输2K内容)
method=“post”(浏览器地址栏中 不可见)
<form action="image_01163邮箱.html" method="get">
</form>
method=“get” 状态下, 图片以上内容提交后,在新的窗口地址栏可以看到
http://127.0.0.1:8848/day02/html/image_01163%E9%82%AE%E7%AE%B1.html?email=admin%40qq.com&password=12345&truename=%E5%BC%A0%E4%B8%89&gender=&sel1=days&renren_code=123&x=96&y=13
将网页后面的内容拆分后可以看见,?以后的内容有
email=admin%40qq.com
&password=12345
&truename=%E5%BC%A0%E4%B8%89(中文被编码了)
&gender=&sel1=days
&renren_code=123(验证码)
&x=96(表示点击img的提交按钮的横坐标)
&y=13(表示点击img的提交按钮的纵坐标)
method=“post” 状态下, 图片以上内容提交后,在新的窗口地址栏可以看到
table表格的制作
用表格制作一张简历
表格需要注意的colspan=" " 与 rowspan=" " 的属性(非常重要)
td rowspan=“4”(表示占用4行位置)
td rowspan=“3”(表示占用3列的位置)
源代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
td{
text-align: center;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10">
<caption><h1>个 人 简 历</h1></caption>
<tr>
<td>姓名</td>
<td style="width: 80px;"> </td>
<td>性别</td>
<td> </td>
<td>出生年月</td>
<td style="width: 50px;"> </td>
<td rowspan="4" style="width: 100px;"> </td>
</tr>
<tr>
<td>名族</td>
<td> </td>
<td>政治面貌</td>
<td> </td>
<td>身高</td>
<td> </td>
</tr>
<tr>
<td>学制</td>
<td> </td>
<td>学历</td>
<td> </td>
<td>户籍</td>
<td> </td>
</tr>
<tr>
<td>专业</td>
<td> </td>
<td colspan="2">毕业学校</td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="7">技能、特长或爱好</td>
</tr>
<tr>
<td>外语等级</td>
<td colspan="2"> </td>
<td>计算机</td>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="7">个 人 简 历</td>
</tr>
<tr>
<td>时间</td>
<td colspan="2">单位</td>
<td colspan="4">经 历</td>
</tr>
<td>2002年4月</td>
<td colspan="2"> </td>
<td colspan="4"> </td>
</tr>
<td>2003年3月</td>
<td colspan="2"> </td>
<td colspan="4"> </td>
</tr>
<td>2003年8月</td>
<td colspan="2"> </td>
<td colspan="4"> </td>
</tr>
<tr>
<td colspan="7">联 系 方 式</td>
</tr>
<tr>
<td>通讯地址</td>
<td colspan="3"> </td>
<td>联系方式</td>
<td colspan="2"> </td>
</tr>
<tr>
<td>E-mail</td>
<td colspan="3"> </td>
<td>邮编</td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="7">自 我 评 价</td>
</tr>
<tr>
<td colspan="7" style="height: 100px;"></td>
</tr>
</table>
</body>
</html>
以上就是今天总结的一些,里面可能有错误,应该有很多解释不太清楚的地方。
希望未来能更努力,共勉!