目录
(接上一期知识,咱们继续讲解。)
一、表单
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>    <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>密 码<input type="password" name="psd" value="" /></p>
<p><p><p><p><p>留 言<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 />全选 删除选中商品
             
             
             
             
             
   
已选商品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;"> 继续购物  
<input type="submit" name="number" id="" value="去结算" style="color: white;background-color: red;" />
</p>
</form>
</div>
</body>
</html>
效果如下图:

二、总结
今天的学习到此结束,希望各位小伙伴们能利用原理知识,并结合练习掌握它。
咱们下期再见。
本文深入介绍了HTML中的表单元素,包括input的各类型、表单按钮、下拉框、多文本区域及label的用法。通过六个实战练习帮助读者巩固和应用这些知识。

被折叠的 条评论
为什么被折叠?



