0.HTML网页技术(高级)
1.表单
1.1 什么是表单
表单在网页中主要负责数据采集功能。一组标签
1.2 表单的重要性
表单是网页中非常重要的组成部分,是我们与网站进行数据交互的一种非常重要的手段,
表单通常会封装我们输入的很多内容然后打包上传给服务器,然后服务器根据我们提交的内容再做出相应的回应,表单应用最出名的就是百度;
如果我们的程序中中加入了网页技术的化 其实我们的程序叫做 B/S
程序分为两类
1. C/S 客户端 / 服务端 王者荣耀 英雄联盟 QQ 肯定需要下载程序的客户端 然后使用的时候联网和服务器交互 使用
2. B/S 浏览器 / 服务端 浏览器里有不同的网站 每个网站可以接收数据传给它的服务器 然后再跟你进行交互
1.3 表单编写的基本语法
get | post 都是数据的从浏览器到网站服务器的发送方式
get : 明文传输数据 传输速度非常快快 但是传输内容有限 一次请求的数据大小限制在2K 并且只能传输字符
post : 密文传输 传输速度比较慢 但是可以传输非常多的内容 正常情况下传输字符 非正常情况下经过设置连声音 视频 图片都可以传输,这个get请求是做不到的
post方式提交的数据安全性要明显高于get方式提交的数据。因此在实际开发中通常采用post方式提交表单数据。
简单案例实践 : 写一个小的百度搜索
代码如下 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
</form>
</body>
</html>
2 常用的表单元素
2.1 表单元素概述
表单是封装了好多输入的一个集合(其思想是符合OOP原则的),那么我们在表单中输入内容的时候就需要用到各种接收数据的网页标签,这些标签统称为输入(input)标签,其语法如下
2.2 文本框 : 用来接收文字输入的
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML案例</title>
</head>
<body>
<form method="get" onsubmit="return false;">
<p>
这是一个文本框 : <input type="text" name="t1" id="t1" />
</p>
</form>
</body>
</html>
2.3 密码框 : 用来接收密文密码的
代码 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML案例</title>
</head>
<body>
<form method="get" onsubmit="return false;">
<p>
这是一个密码框 : <input type="password" name="p1" id="p1" />
</p>
</form>
</body>
</html>
此处需要注意,文本框和密码框在接收数据的时候文本框是明文展示,密码框是密文展示;
2.4 单选按钮用于在一组选项中选择一个值
注意 : 单选按钮的name属性必须是一致的,代表一组数据中选出一个,这才是单选;所以怎么表示是一组数据呢?那就需要这一组数据有一个相同的名字了
代码 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML案例</title>
</head>
<body>
<form method="get" onsubmit="return false;">
<p>
单选框案例 : 请选择您的性别<br />
<input type="radio" name="gen" value="男" checked="checked" />男<br />
<input type="radio" name="gen" value="女" />女
</p>
</form>
</body>
</html>
2.5 复选框用于在一组选项中选择多个值
复选框和单选框一样都是要从一堆选项中选值,不一样的是复选框可以从这堆选项中选出很多个值而单选框只能选一个
代码 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML案例</title>
</head>
<body>
<form method="get" onsubmit="return false;">
<p>
复选框案例 : 请描述您是一个什么样的人<br />
<input type="checkbox" name="rp" value="特别帅气" checked="checked" />特别帅气<br />
<input type="checkbox" name="rp" value="非常善良" />非常善良<br />
<input type="checkbox" name="rp" value="学习特好" />学习特好<br />
<input type="checkbox" name="rp" value="有很多钱" />有很多钱<br />
<input type="checkbox" name="rp" value="乐于助人" />乐于助人<br />
</p>
</form>
</body>
</html>
2.6 列表框(常用)用于在一堆选项中选择一个
列表框和单选框一样都是在一堆值中选择一个,列表框是单选框的优化结构,列表框把值都做成下拉列表的形式,这样有助于节省页面空间
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML案例</title>
</head>
<body>
<form method="get" onsubmit="return false;">
<p>
列表框案例 : 请选择你来自于哪里<br />
<select name="from">
<option value="请选择市区">请选择省份</option>
<option value="北京市">
北京市 </option>
<option value="天津市">
天津市 </option>
<option value="上海市">
上海市 </option>
<option value="重庆市">
重庆市 </option>
<option value="河北省">
河北省 </option>
<option value="山西省">
山西省 </option>
<option value="辽宁省">
辽宁省 </option>
<option value="吉林省">
吉林省 </option>
<option value="黑龙江省">
黑龙江省</option>
<option value="江苏省">
江苏省 </option>
<option value="浙江省">
浙江省 </option>
<option value="安徽省">
安徽省 </option>
<option value="福建省">
福建省 </option>
<option value="江西省">
江西省 </option>
<option value="山东省">
山东省 </option>
<option value="河南省">
河南省 </option>
<option value="湖北省">
湖北省 </option>
<option value="湖南省">
湖南省 </option>
<option value="广东省">
广东省 </option>
<option value="海南省">
海南省 </option>
<option value="四川省">
四川省 </option>
<option value="贵州省">
贵州省 </option>
<option value="云南省">
云南省 </option>
<option value="陕西省">
陕西省 </option>
<option value="甘肃省">
甘肃省 </option>
<option value="青海省">
青海省 </option>
<option value="台湾省">
台湾省 </option>
<option value="广西壮族自治区">
广西壮族自治区</option>
<option value="内蒙古自治区">
内蒙古自治区</option>
<option value="西藏自治区">
西藏自治区</option>
<option value="宁夏回族自治区">
宁夏回族自治区 </option>
<option value="新疆维吾尔自治区">
新疆维吾尔自治区</option>
<option value="香港特别行政区">
香港特别行政区</option>
<option value="澳门特别行政区">
澳门特别行政区</option>
</select>
</p>
</form>
</body>
</html>
2.7 按钮用于执行页面事件
按钮是页面上一组特殊的存在,按钮可以单击,可以双击所以根据按钮的不同点击效果我们可以对应执行某些页面时间
此处我们介绍了三种按钮
1) 普通按钮(button) : 页面上的普通按钮,需要自己定义按钮的单击事件才能发挥作用
2) 提交按钮(sunmit) : 页面上的提交按钮,必须生活在表单中,它可以帮助我们提交包含这个按钮的form表单
3) 重置按钮(reset) : 页面上的重置按钮,必须生活在表单中,他可以帮助我们瞬间清空表单内容;
代码 :
普通按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML案例</title>
<script type="text/javascript">
function sayHello(){
alert("Hello,JavaScript!");
}
</script>
</head>
<body>
<!-- 一个普通按钮 -->
<button type="button" onclick="sayHello();">我是一个普通按钮,点击会出现一个对话框</button>
</body>
</html>
提交按钮与重置按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML案例</title>
</head>
<body>
<form action="page3.html" method="get">
<p>请输入你的姓名 : <input type="text" name="username" /></p>
<p>
<button type="submit">提交</button>
<button type="reset">重置</button>
</p>
</form>
</body>
</html>
此处需要注意的是以后我们向WEB服务器提交数据的时候,我们提交的数据都是以 key=value的形式传递,WEB服务器只需要根据我们设置的KEY来取值即可
2.8 文本域用于输入多行文本内容
有的时候光靠文本框输入不了太多的文本内容,这时候文本域就发挥了很大的作用,一个文本域可以输入多行文字;
代码 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML案例</title>
</head>
<body>
<form action="page3.html" method="get" >
<p>
文本域案例 : <br />
<textarea name="miaoshu" rows="5" cols="15">
</textarea>
</p>
</form>
</body>
</html>
2.9 特殊类型的输入框
表单除了可以接收以上数据外,还可以根据你的设置帮你接收特殊格式的数据,比如:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML案例</title>
</head>
<body>
<form action="page3.html" method="get" >
<p>
接收整数 : <input type="number" name="p1" min="0" max="99999999" />
</p>
<p>
接收浮点数 : <input type="number" name="p2" min="0.00" max="999999999.00" step="0.01" />
</p>
<p>
接收电子邮箱 : <input type="email" name="p3" maxlength="32" />
</p>
<p>
接收电话 : <input type="tel" name="p4" maxlength="11" />
</p>
<p>
接收日期 : <input type="date" name="p5" />
</p>
<p>
接收时间 : <input type="datetime-local" name="p6" />
</p>
<button type="submit">提交</button>
</form>
</body>
</html>
此处说明一下tel 和 number tel会在移动端弹出纯数字的输入盘,用户体验度会好
tel的移动端测试
number的移动端测试
3 表单综合练习制作人人网注册页面
3.1 案例需求 :
根据效果图完成人人网的注册效果,要求用户体验要好一点!
3.2 具体实现
首先将图片素材放入image文件夹下
3.3 代码：法一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML案例</title>
<script type="text/javascript">
function submit(){
document.getElementById("form1").submit();
}
</script>
</head>
<body>
<!-- 头部图片效果 -->
<header>
<img src="img/renren_titile.gif" >
<p>
人人网,中国<strong>最真实</strong>,<strong>最有效</strong>的社会平台,加入人人网,找回老朋友,结交新朋友.
</p>
</header>
<!-- 表单部分 -->
<section>
<form id="form1" action="page3.html" method="get">
<p>电子邮箱 : <input type="email" name="userEmail" size="20" maxlength="32" /></p>
<p>设置密码 : <input type="password" name="userPass" size="20" maxlength="32" /></p>
<p>真实姓名 : <input type="email" name="realName" size="20" maxlength="32" /></p>
<p>性别 :
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="男" />女
</p>
<p>
生日 : <input type="date" name="birthday" />
<a href="https://www.baidu.com/s?wd=为什么要填写我的生日?" target="_blank">为什么要填写我的生日?</a>
</p>
<p>
我现在 :
<select name="sf">
<option value="">请选择身份</option>
<option value="VIP">我是高富帅</option>
<option value="loser">我是一个好人</option>
</select>
(非常重要)
</p>
<p>
请填写验证码 : <input type="text" /><img src="img/renren_code.gif" /><a href="###">看不清换一张?</a>
</p>
<p>
<img src="img/renren.gif" onclick="submit();" />
</p>
</form>
</section>
</body>
</html>
3.4 代码：法二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>人人网</title>
</head>
<body>
<header>
<img src="img/renren_titile.gif" /><br>
人人网,中国<strong>最真实</strong>,<b>最有效</b>的社会平台,加入人人网,找回老朋友,结交新朋友.
</header>
<section>
<form action="html01-基础.html" method="get">
<table width="600">
<tr>
<td>电子邮箱：</td>
<td><input type="email" name="email" required="required"></td>
</tr>
<tr>
<td>设置密码：</td>
<td><input type="password" name="password"> </td>
</tr>
<tr>
<td>真实姓名：</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>性 别：</td>
<td>
<input type="radio" name="sex" value="1" checked="checked" />男
<input type="radio" name="sex" vlaue="0">女
</td>
</tr>
<tr>
<td>生 日：</td>
<td>
<input type="date" name="birthday" />
<a href="http://www.baidu.com/s?wd=为什么要提交我的生日">为什么要提交我的生日</a>
</td>
</tr>
<tr>
<td>我现在是：</td>
<td>
<select name="status">
<option value="">--请选择--</option>
<option value="gaofushuai">高富帅</option>
<option value="baifumei">白富美</option>
</select>
</td>
</tr>
<tr>
<td>验证码：</td>
<td>
<input type="text" name="code">
<img src="img/renren_code.gif" />
<a href="#" >看不清换一张？</a>
</td>
</tr>
<tr>
<td colspan="2">
<input type="image" src="img/renren.gif" />
</td>
</tr>
</table>
</form>
</section>
</body>
</html>
此处需要注意的就是提交方式问题,大家也能清楚的认识如果get提交会暴露我们很多信息!
4.表单的高级应用
4.1 隐藏域的使用
有的时候需要在你的表单中隐藏一些属性的时候,这时候你就需要隐藏域传递数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML案例</title>
</head>
<body>
<form action="page3.html" method="get">
<p>
隐藏域的使用:
<input type="hidden" name="sf" value="loser" />
</p>
<p>
<button type="submit">提交</button>
</p>
</form>
</body>
</html>
4.2 input标签的只读和禁用属性 : readonly(只读) disable(禁用)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML案例</title>
</head>
<body>
<form action="page3.html" method="get">
<p>
设置为只读演示:
<input type="text" name="p1" value="我是只读的你修改不了" readonly="readonly" />
</p>
<p>
设置为禁用演示 :
<button type="submit" disabled="disabled">提交(我是禁用的你点不了)</button>
</p>
</form>
</body>
</html>
4.3 表单的初级校验方法
4.3.1 placeholder : 输入框提示消息
input类型的文本框提供一种提示（hint）
可以描述文本框期待用户输入何种内容
提示语默认显示，当文本框中输入内容时提示语消失
适合于input标签：text、search、url、email和password等类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML案例</title>
</head>
<body>
<form action="page3.html" method="get">
<p>
文本框提示效果 : <input type="text" placeholder="我是文字提示效果" />
</p>
</form>
</body>
</html>
4.3.2 required : 规定是否允许为空值
规定文本框填写内容不能为空，否则不允许用户提交表单
适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML案例</title>
</head>
<body>
<form action="page3.html" method="get" onsubmit="return false;">
<p>
文本框提示效果 : <input type="text" placeholder="我是文字提示效果" required="required"/>
</p>
<p>
<button type="submit">提交</button>
</p>
</form>
</body>
</html>
5 总结
2745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
