HTML学习知识点大全2-----超详细(各种标签使用讲解及案例)
4.0 表单标签
表单:
概念就是用于采集用户输入的数据,向服务器提交
表单是使用form标签来定义的:
表单是由form标签来定义的
form:代表是一个表单
action:用于表单提交url
method:表单提交方式:一共7种,
1. get:
1.请求参数在地址栏中进行展示,相当于在请求行中(URL)
2.请求参数长度是有限的
3.不太安全
2. post:
1.请求参数不会在地址栏中,请求参数在请求提中(HTTP协议请求体)
2.长度是没有限制的
3.相对比较安全
注意:
表单提交时:输入框的name属性是必须要有的,否则无法提交参数
4.1 快速入门
<!--快速入门-->
<form action="26变化的云彩.html" method="post">
账号: <input type="text" name="username"><br/>
密码:<input type="password" name="password"><br/>
<input type="submit" value="登录">
</form>
4.2 表单项标签
4.2.1基本的表单
<!--1.定义表单-->
<form action="#" method="get">
<!--2.定义表单项-->
<p>名字:<input type="text" name="name"></p>
<p>密码:<input type="password" name="password"></p>
<p>
<input type="submit" value="提交">
<input type="reset" name="reset" value="重填">
</p>
</form>
属性分析
属性 | 描述 |
---|
type | 指定元素的类型,text,password,checkbox,radio,submit,reset,file,hidden,image,和button,如果不写默认text |
name | 指定表单元素的名称 |
value | 元素的初始值 type为radio时必须指定一个值 |
size | 指定表单元素初始宽度,当我们type为text或者password时,表单元素的大小以字符为单位 |
maxlength | type类型为text或者password时,输入的最大字符数 |
checked | type为radio或者checkbox时,指定按钮是否被选中 |
表单项及属性
<title>表单项及属性</title>
</head>
<body>
<form action="26变化的云彩.html" method="get" enctype= "multipart/form-data">
<!-- type="text" :文本框
name="username" :表单项名称
value="用户名":表单项初始值
size="10":宽度按照字符长度
maxlength="8":最多能输入字符数-->
<p>账号:<input type="text" name="username" value="用户名" size="10" maxlength="8"></p>
<!--密码框
type="password"
size="20":按照可输入字符宽度
-->
<p>密码:<input type="password" name="pass" size="20"></p>
<!--单选框
一对单选框:name属性值必须相同,否则不识别为一对单选框 添加value初始值
type="radio"
-->
<p>
性别:<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女" checked>女
</p>
<!--复选框
type="checkbox"
name属性值也必须保持一致
-->
<p>
爱好:<input type="checkbox" name="hobby" value="game" checked>玩游戏
<input type="checkbox" name="hobby" value="play" checked>遛狗
<input type="checkbox" name="hobby" value="swim">游泳
</p>
<!--列表框
<select>定义列表框
name="city"定义列表框名称 size定义列表框的行数
<option:定义列表项
value="":对应列表的初始值
-->
<p>
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="hangzhou">杭州</option>
<option value="tianjin">天津</option>
<option value="zhengzhou">郑州</option>
</select>
</p>
<p>
<!--按钮
1.重置按钮:
type="reset"
name="reset":按钮名称
value="reset重置":按钮的初始值
2.图片按钮
type="image"
src:指向本地资源
3.普通按钮
type="button"
4.提交按钮
type="submit"
-->
<input type="reset" name="reset" value="reset重置">
<input type="image" src="image/logo.jpg">
<input type="button" name="btn" value="注册">
<input type="submit" name="sub" value="登录">
<!--文件框
指定表单提交文件格式:
enctype:"multipart/form-data"
-->
<p>
<input type="file" name="files">
</p>
<!--邮箱
type="email"
会自动校验Email地址格式是否正确
-->
<p>
邮箱:<input type="email" name="email">
</p>
<!--数字框
type="number"
min:允许最小值
max:允许的最大值
step:合法数字间隔
-->
<p>
数字:<input type="number" name="num" min="1" max="100" step="10">
</p>
<!--搜索框-->
<p>
<input type="search" name="sousuo"><input type="submit" name="sub" value="搜索">
</p>
</form>
案例:网页邮箱登录页面
表单元素:文本框,密码框,下拉列表,复选框,提交按钮
HTML5结构元素:header section footer等
需求说明:
制作网易邮箱登录页面
不需要排版该页面,只需要html5元素结合标签语义化把该页面的结构布局出来即可
<title>网易邮箱登录页面</title>
</head>
<body>
<!--第一步,先把网易邮箱划分结构,该网页分页三部分,上中下结构-->
<!--header头部分分为两部分,左右,左边放logo ,右边放文字-->
<header>
<!-- 左边logo-->
<h1><a href="#"><img src="wangyi/163logo.gif" alt="logo"></a></h1>
<!--右边文字信息-->
<p>
<a href="#">免费邮</a>
<a href="#">企业邮</a>
<a href="#">VIP邮箱</a>
<a href="#">帮助</a>
</p>
</header>
<!--中间的section部分又分为左右结构,左边是图片和一个无序列表,右边是表单-->
<!--左边-->
<section>
<div>
<img src="wangyi/imap.jpg" alt="">
<ul>
<li>163/126/yeah三大免费邮箱均默认开通</li>
<li>前面支持Iphone/ipad及Android等系统</li>
<li>客户端,手机端,实现发送,阅读邮件</li>
</ul>
<a href="#">立即同步普通登陆手机号登陆</a>
</div>
<!--右边表单-->
<form action="#" method="get">
<p>
用户名:<input type="text" name="username">@163.com
</p>
<p>
密码:<input type="password" name="password">
</p>
<p>
版本:
<select name="version" id="">
<option value="">默认</option>
<option value="1">2021</option>
<option value="2">2020</option>
<option value="2">2019</option>
<option value="4">2018</option>
</select>
</p>
<p>
<input type="checkbox" name="cbs" value="autoLogin">自动登陆
<input type="checkbox" name="cbs" value="ssl" checked>SSL
</p>
<p>
<input type="submit" value="登录">
<input type="submit" value="注册">
</p>
</form>
</section>
<!--底部footer-->
<footer>
<img src="wangyi/netease_logo.gif" alt="">
<a href="#">关于网易</a>
<a href="#">免费邮</a>
<a href="#">官方博客</a>
<a href="#">客户服务</a>
<a href="#">隐私政策</a>
<a href="#">公司版权所有©2015-2021</a>
</footer>
</body>
表单的高级应用
隐藏域
只读
禁用
<!--隐藏域
有的时候需要给服务器提交一些数据,但是这些数据有没有必要在页面上进行展示
-->
<form action="11图片标签.html">
<input type="hidden" value="666" name="userid">
<input type="submit" value="注册">
<!--只读
只可以观看,不可以修改
-->
<input type="text" name="name" value="张三" readonly>
<!--禁用-->
<input type="text" name="user" disabled>
</form>
表单的初级验证
好处:
1.减轻服务器压力
2.保证数据的可行性和安全性
3.让代码更加健壮
placeholder
required
pattern
placeholder
input类型的文本,用于提示的信息
可以描述文本框期待用户输入的数据
提示语默认显示,当文本框输入数据后消失
适用于input标签:text,search,url,email,password等类型
<input type="text" name="username" placeholder="请输入用户名">
required
规定了文本框填写的内容不能为空,否则就不允许用户提交表单
适用于input标签有:text,password,search,url,email,number,checkbox,radio,file等类型
<input type="text" name="user" required>
<input type="submit" value="提交">
pattern
用户输入的内容必须符合正则表达式所规定的规则,否则不允许提交表单
<input type="text" name="person" pattern="^1[358]\d{9}">
案例:制作QQ注册页面验证
<title>注册页面表单验证</title>
</head>
<body>
<img src="qq/bg_chs.png" alt="">
<h3>注册账号</h3>
<form action="#" method="get">
<p>
<label for="username">昵称</label>
<!--\w:字符
\u4E00-\u9FA5:中文
{4,10}:最少4位,最多10位-->
<input type="text" name="username" id="username" required pattern="[-\w\u4E00-\u9FA5]{4,10}">
<sapn>长度4-10个字符</sapn>
</p>
<p>
<lable for="password">密码</lable>
<!--\d:0-9数字
A-Za-z:单词字符
{6,16}:最少6位,最多16位-->
<input type="password" name="password" id="password" required pattern="[\dA-Za-z]{6,16}">
<span>长度6-16个字符</span>
</p>
<p>
<label for="psw1">确认密码</label>
<input type="password" placeholder="请输入确认密码" name="psw1" id="psw1" required pattern="[\dA-Za-z]{6,16}">
<span>长度6-16个字符</span>
</p>
<p>
<label for="phone">手机号</label>
<input type="tel" id="phone" placeholder="请输入手机号" name="phone" required pattern="1[3578]\d{9}">
<span>长度11位整数</span>
</p>
<p>
<label for="email">邮箱</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱" required>
<span>填写邮箱正确格式</span>
</p>
<p>
<label for="age">年龄</label>
<input type="text" id="age" name="num" required pattern="\d|[1-9]\d|1[0-2]\d">
</p>
<p>
<input type="image" src="qq/btn.bmp">
</p>
</form>
</body>
</html>
案例:注册页面
<!--form表单加上table表格进行完成制作-->
<form action="#" method="get">
<table border="1px soild" align="center" width="500">
<tr>
<td>
<label for="username">用户名</label>
</td>
<td>
<input type="text" name="username" id="username">
</td>
</tr>
<tr>
<td>
<lable for="password">密码</lable>
</td>
<td>
<input type="password" name="password" id="password">
</td>
</tr>
<tr>
<td>
<label for="email">Email</label>
</td>
<td>
<input type="email" name="email" id="email">
</td>
</tr>
<tr>
<td>
<label for="name">姓名</label>
</td>
<td>
<input type="text" name="name" id="name">
</td>
</tr>
<tr>
<td>
<label for="phone">手机号</label>
</td>
<td>
<input type="text" name="phone" id="phone">
</td>
</tr>
<tr>
<td>
<label for="sex">性别</label>
</td>
<td>
<input type="radio" name="sex" value="man" id="sex" checked>男
<input type="radio" name="sex" value="wuman" checked>女
</td>
</tr>
<tr>
<td>
<label for="data">出生日期</label>
</td>
<td>
<input type="date" id="data" name="birthday">
</td>
</tr>
<tr>
<td>
<label for="checkcode">验证码</label>
</td>
<td>
<input type="text" name="check" id="checkcode">
<img src="zhuce/verify_code.jpg" alt="">
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="注册">
</td>
</tr>
</table>
</form>
至此HTML的一些重点的知识点和案例就已经更新完毕了,当然在后面博主也会更新一些CSS的知识点学习心得笔记,有需要的同学还可以点点关注哟!