form表单标签的练习、以及table标签的运用

最新推荐文章于 2023-01-16 18:35:23 发布

进击的小熙

最新推荐文章于 2023-01-16 18:35:23 发布

阅读量477

点赞数 3

分类专栏： HTML、CSS 文章标签： html

本文链接：https://blog.csdn.net/Wenaizi/article/details/96506351

版权

HTML、CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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;">&nbsp;</td>
				<td>性别</td>
				<td>&nbsp;</td>
				<td>出生年月</td>
				<td style="width: 50px;">&nbsp;</td>
				<td rowspan="4" style="width: 100px;">&nbsp;</td>
			</tr>
			<tr>
				<td>名族</td>
				<td>&nbsp;</td>
				<td>政治面貌</td>
				<td>&nbsp;</td>
				<td>身高</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>学制</td>
				<td>&nbsp;</td>
				<td>学历</td>
				<td>&nbsp;</td>
				<td>户籍</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>专业</td>
				<td>&nbsp;</td>
				<td colspan="2">毕业学校</td>
				<td colspan="2">&nbsp;</td>
			</tr>
			<tr>
				<td colspan="7">技能、特长或爱好</td>
			</tr>
			<tr>
				<td>外语等级</td>
				<td colspan="2">&nbsp;</td>
				<td>计算机</td>
				<td colspan="3">&nbsp;</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">&nbsp;</td>
				<td colspan="4">&nbsp;</td>
			</tr>
				<td>2003年3月</td>
				<td colspan="2">&nbsp;</td>
				<td colspan="4">&nbsp;</td>
			</tr>
				<td>2003年8月</td>
				<td colspan="2">&nbsp;</td>
				<td colspan="4">&nbsp;</td>
			</tr>
			<tr>
				<td colspan="7">联　系　方　式</td>
			</tr>
			<tr>
				<td>通讯地址</td>
				<td colspan="3">&nbsp;</td>
				<td>联系方式</td>
				<td colspan="2">&nbsp;</td>
			</tr>
			<tr>
				<td>E-mail</td>
				<td colspan="3">&nbsp;</td>
				<td>邮编</td>
				<td colspan="2">&nbsp;</td>
			</tr>
			<tr>
				<td colspan="7">自　我　评　价</td>
			</tr>
			<tr>
				<td colspan="7" style="height: 100px;"></td>
			</tr>
		</table>
	</body>
</html>

以上就是今天总结的一些，里面可能有错误，应该有很多解释不太清楚的地方。
希望未来能更努力，共勉！

进击的小熙

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
form表单标签的练习、以及table标签的运用

html，form表单标签的运用form标签文本表单单选表单复选框下拉选项框提交、重置哦、普通按钮文本域文件表单form标签所有的表单标签都需要放在form标签里面，有助于将表单数据传输给服务器。 <form action="image_01163邮箱.html" method="get"> <label for="email">电子邮箱：...
复制链接

扫一扫

专栏目录