【HTML】入门小知识,表格?解决它。

本文深入介绍了HTML中的表单元素,包括input的各类型、表单按钮、下拉框、多文本区域及label的用法。通过六个实战练习帮助读者巩固和应用这些知识。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

一、表单

   1.公式

    2.表单域input 

    3.表单按钮input                          

    4.下拉框

    5.多文本区域                  

    6.label

练习一

 练习二

练习三

练习四

练习五

练习六 

 二、总结


(接上一期知识,咱们继续讲解。)

一、表单

   1.公式

         <form action="" method="">

             <input type=" " name=" " id=" " value=" "/>

         </form>

      注:

                         表单组成:{表单标签:form}、{表单域:input}、{表单按钮:submit}

                            action: 提交到服务器的url地址

           method:提交方式:get:参数会出现在地址栏

                                           post:参数不会出现在地址栏,更安全

   

    2.表单域input:

              type表单类型: 

                             text:文本框,                                           

                             password:密码框                           

                             hidden:隐藏域(当有些数据提交给后端,又不希望用户看到),                                                       checkbox:复选框

                             radio:单选框

                    <form method="post" enctype="multipart/form-data">(multiple:代表可以多文件上传)

               属性:

                           name:代表表单的名称,后端通过name值获取用户填写的内容

                           value:用来接收用户输入的内容,也可以设置默认值 

                           size:初始宽度,代表字符数

                           maxlength:可输入的最大字符数

                style: 

                         background:设置背景颜色

                          color:设置字体颜色

                          width:设置宽度

                          height:设置高度

                          font size:字体大小 

               表单高级属性:

                          readonly:只读,用户无法编辑,数据会随表单正常提交

                          required:必填

                          disabled:禁用,相当于作废,数据不会随表单正常提交

                          placeholder:预期提示

   

    3.表单按钮input:                          

                           submit:提交按钮

                           image:(图片)提交按钮,他俩会自动把数据提交给后端

                           button:按钮(普通按钮,需配合事件使用)

                           reset:重置按钮,回到表单最初状态

                          <button type=“button”>点击内容</button>

    4.下拉框:

                     <select name="" multiple>
                          <option value="" selected></option>
                    </select>

    5.多文本区域:                  

                   <textarea rows="" cols=""></textarea>

                   注释:rows:代表文本初始容纳的行数,超过会自动显示滚动条

                              cols:列宽,规定每一行显示的字符数

    6.label

                 <label for="id值">内容<label>

                abel标注:增强鼠标的可用性,自动将焦点转移到与该标注相对应的表单元素上

                                           理论再多,也需要实践啊。

练习一:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习一</title>
	</head>
	<body>
		<form action="" method="post">
			<p><input type="text" name="username" size="20px" maxlength="20px" value="12345678910" /></p>
			<p><input type="password" name="pwd" maxlength="11px" value="123456" /></p>
			<p>&emsp;&emsp;&emsp;&ensp;<input type="submit" style="background:blue; color:white;width: 100;" value="登录"/></p>
		</form>
	</body>
</html>

 效果如下图:

 练习二:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习二</title>
	</head>
	<body>
		<form action="" method="get">
			<p>用户名<input type="text" name="username" value="" /></p>
			<p>密&emsp;码<input type="password" name="psd" value="" /></p>
			<p><p><p><p><p>留&emsp;言<textarea rows="10" cols="10"></textarea></p>
			<p><p><p><p><input type="submit" value="提交" /></p>
			<p><p><p><input type="button" value="注册" /></p>
			<p><p><input type="reset" value="重置" /></p>
			<p><input type="image" src="imgs/submit.jpg"/></p>
		</form>
	</body>
</html>

  效果如下图:

练习三:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习三</title>
	</head>
	<body>
		<p><img src="imgs01/renren_titile.gif"></p>
		<p>人人网,中国<b>最真实、最有效</b>的社会平台,加入人人网,找回老朋友,结交新朋友。</p>
		<form action="" method="post">
			<p>电子邮箱:<input type="text" maxlength="50" name="email" id="" value="" /></p>
			<p>设置密码:<input type="password" maxlength="16" name="pwa" id="" value="" /></p>
			<p>真实姓名:<input type="text" maxlength="8" name="name" id="" value="" /></p>
			<p>性别:`<input type="radio" name="gender" id="" value="male" checked />男
			     <input type="radio" name="gender" id="" value="female" />女</p>
			生日:<select name="years">
			    <option value ="1991" selected >1991</option>
				<option value ="1992">1992</option>
				<option value ="1993">1993</option>
			</select>年
			<select name="month">
				<option value ="11" selected >11</option>
				<option value ="10">10</option>
				<option value ="9">9</option>
			</select>月
			<select name="day">
				<option value ="30" selected >30</option>
				<option value ="29">29</option>
				<option value ="28">28</option>
			</select>日
			<p>为什么要填写我的生日?</p>
			<p>
				我现在:
				<select name="identify">
			    <option value ="select identify,please" selected >请选择身份</option>
				</select>
				(非常重要)
			</p>
			<p>
				<img src="imgs01/renren_code.gif" >
				<a href="#">看不清换一张?</a>
				
			</p>
			验证:<input type="text" maxlength="5" name="number" id="" value="" />
			<p><input type="image" src="imgs01/renren.gif"></p>
		</form>
	</body>
</html>

效果如下图:

 

练习四:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习四</title>
	</head>
	<body>
		<b><img src="imgs02/logo.bmp" ></b>
		<p>
			<a href="#">登录</a>|
			<a href="#">阿里巴巴首页</a>|
			<a href="#">客服中心</a>|
			<img src="imgs02/icon1.bmp" >
			<a href="#">提建议</a>
		</p>
		如需要帮助,请咨询
		<img src="imgs02/icon2.bmp" >
		或拨打400-800-1688
		<form action="" method="post">
			<p>电子邮箱:<input type="text" maxlength="30" name="email" id="" value="" /></p>
			<p>会员登录名:<input type="text" maxlength="30" name="vipname" id="" value="" /></p>
			<p>密码:<input type="password" maxlength="30" name="pwd" id="" value="" /></p>
			<p>再次输入密码:<input type="password" name="pwd" id="" value="" /></p>
			<p>会员身份<input type="radio" name="vip identify" id="" value="buy" checked />买家
			           <input type="radio" name="vip identify" id="" value="sell" />卖家
					   <input type="radio" name="vip identify" id="" value="all" />两者都是
			</p>
			<p>
            验证码:<input type="text" maxlength="30" name="Verification Code" id="" value="" />
			<img src="imgs02/verycode.gif" >
			<a href="#">看不清楚?换一张</a>
			</p>
			<p><input type="image" src="imgs02/btn_reg.gif"/></p>
			<textarea rows="10" cols="40">
				阅读阿里巴巴公司(阿里巴巴)服务条款协议(下称"本协议"),您应
				蟹在使用服务之前认真阅读本协议全部内容,
				且对本协议中加粗字体显示的内容,阿里巴巴
				督促您应重点阅读。本协议阐述之条款和条件
				适用于您使用阿里巴巴中文网站(所涉域名
				为:Alibaba.com. cn、alibaba. cn1688.com,下同),所提供的在全球企业间
				(B-TO-B)电子市场(e-market)中进行贸易和交
				流的各种工具和服务(下称“服务”)。
			</textarea><br>
			<img src="imgs02/footer.jpg" >
		</form>
	</body>
</html>

效果如下图:

练习五: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习五</title>
	</head>
	<body>
		<p align="center">
			<img src="imgs03/qq.jpg" >
		</p>
		<form action="" method="post">
		<p align="center">
			账号:<input type="text" name="ID" id="" value="" />
		<span id="name" style="color:red">账号输入不能超过10个字符</span>
		</p>
		<p align="center">
			密码:<input type="password" name="pwd" id="" value="" />
		<span id="name" style="color:red" >密码必须填写</span>
		</p>
		<p align="center">
			性别:<input type="radio" name="gender" id="" value="male" checked />男
		     <input type="radio" name="gender" id="" value="female" />女
			 <span id="gender" style="color:red">性别单选按钮 </span>
		</p>
		<p align="center">
			出生日期:<select name="year">
			<option value ="1987" selected >1987</option>
		</select>年
		<select name="month">
			<option value ="1" selected >1</option>
		</select>月
		<select name="day">
			<option value ="1" selected >1</option>
		</select>日
		<span id="date" style="color:red">默认1995年	</span>
		</p>
		<p align="center">兴趣爱好:<input type="checkbox" name="interest" id="" value="" checked />编程
		<input type="checkbox" name="interest" id="" value="dance" />跳舞
		<input type="checkbox" name="interest" id="" value="run" />跑步
		<input type="checkbox" name="interest" id="" value="weiqi" />围棋
		<input type="checkbox" name="interest" id="" value="travel" />旅游</p>
		<p align="center" >
		<input type="checkbox" name="interest" id="" value="plays" />玩游戏
		<input type="checkbox" name="interest" id="" value="read" />阅读
		<input type="checkbox" name="interest" id="" value="taiquandao" />跆拳道
		<input type="checkbox" name="interest" id="" value="lecture" />演讲
		</p>
		<p align="center">
			个人介绍:<textarea rows="5" cols="70"></textarea>
	    </p>
		<p align="center">
			<input type="image" src="imgs03/submit.jpg"/>
			<input type="button" value="擦掉重写" />
		</p>
		</form>
	</body>
</html>

效果如下图:

练习六: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习六</title>
	</head>
	<body>
		<div id="do" style="width: 800px;">
			<table border="1" cellspacing="0" cellpadding="0">
				<tr bgcolor="antiquewhite" align="center">
					<th>
						<form action="" method="post">
							<input type="checkbox" name="" id="" value="" checked />
						</form>
					</th>
					<th>商品</th>
					<th>颜色/尺码</th>
					<th width="150">数量</th>
					<th>售价</th>
					<th>优惠</th>
					<th>成交价小计</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
				<tr align="center">
					<td>
						<form action="" method="post">
							<input type="checkbox" name="" id="" value="" checked />
						</form>
					</td>
					<th>
						<img src="imgs04/QQ图片20220110192043.png">
						<span id="number" style="vertical-align: top;">
							男舒适小脚休闲插袋洗水长裤(753056)
						</span>
					</th>
					<th>
						丹宁棕<br>
						160/66A
					</th>
					<th>
						<form action="" method="post">
							<input type="button" value="-" />
							<input type="text" name="number" id="" value="1" size="2" style="text-align:center" />
							<input type="button" value="+" />
						</form>
					</th>
					<th>¥119.00</th>
					<th>¥0.00促销优惠</th>
					<th>¥119.00</th>
					<th width="50">有货</th>
					<th>
						加入收藏夹|删除<br>
						<a href="#">修改优惠</a>
					</th>
				</tr>
			</table>
			<p>
			<form action="" method="post">
				<p>
					<input type="checkbox" value="" checked />全选&ensp;删除选中商品
					&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
					&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
					&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
					&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
					&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
					&emsp;&emsp;&emsp;
					已选商品1件
				</p>
			</form>
			</p>
			<p style="text-align: right;">商品总价:¥119-优惠¥0.00</p>
			<p style="text-align: right;">
				合计(不含运费):
				<span id="number" style="color: red;"><big>¥119.00</big>
				</span>
			</p>
			<form action="" method="post">
				<p style="text-align: right;"> 继续购物&emsp;&emsp;
					<input type="submit" name="number" id="" value="去结算" style="color: white;background-color: red;" />
				</p>
			</form>
		</div>
	</body>
</html>

效果如下图:

 二、总结

                  今天的学习到此结束,希望各位小伙伴们能利用原理知识,并结合练习掌握它。

                                                        咱们下期再见。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值