文章目录
- 一、HTML-form表单
- 1、用户注册表单
- 2、用户注册表单 - 小升级
- 3、HTML5表单新特性
- ① 新的input type
一、HTML-form表单
1、用户注册表单
<html>
<head>
<meta charset="UTF-8">
<title>HTML用户注册表单</title>
</head>
<body>
<!--
form表单
1、作用：用于收集(接受)用户输入(信息)
(表单展示后，用户填写表单信息，点击提交按钮提交数据给服务器)
注：一个页面中可以有多个form表单
2、action属性：规定提交表单时，发送表单数据至何处
<form action="URL"></form>
若没有设置action属性，表单默认提交给当前页面
form表单的action属性和超链接的href属性一样，都可以向服务器发送数据(请求request)
3、method属性：规定提交表单时所用的HTTP方法 (GET方法或POST方法)
get请求:(默认)用户提交的信息会显示在浏览器的地址栏上，安全性更差
post请求：用户提交的信息不会显示载浏览器的地址栏上，起到加密作用，安全性更高 (建议用都用POST请求)
下面例子若采用get方法，填写表单信息提交后，浏览器任务栏会出现以下信息
http://loaclhost8080/jd/register?username=张三&userpwd=123&sex=male&hobby=running&hobby=swimming&education=bk
即：URL?name=value&name=value&name=value&...
超链接也可以提交数据，但提交的数据是固定不变的；且超链接是get请求，不是post请求。
4、input元素：输入域，最重要的表单元素，可根据不同的type属性变化不同的形态
<input type=" " name=" " value=" " ... />
type属性：type="text(文本框) /password(密码框) /radio(单选按钮) /checkbox(多选按钮) /submit(提交按钮) /reset(重置按钮)..."
定义常规文本输入：<input type="text" name=" " />
定义密码输入：<input type="password" name=" " />
定义单选按钮：<input type="radio" name=" " value=" " /> 【对于同一组单选按钮来说，name属性值必须保持一致】
定义多选按钮：<input type="checkbox" name=" " value=" " /> 【对于同一组复选按钮来说，name属性值也必须保持一致】
提交表单：<input type="submit" value=" " />
重置(清空)表单：<input type="reset" value=" " />
5、select元素：下拉列表
option元素：定义待选的选项
selected属性：定义预定义选项 (默认选中选项)
语法格式：点击选中的选项value值赋值给name值
<select name=" ">
<option value=" " selected="selected"></option>
<option value=" "></option>
<option value=" "></option>
</select>
6、textarea元素：文本域 (多行输入)
<textarea rows="m" cols="n" name=" ">此文本域可输入m行n列文字</textarea>
-->
<!--
文本框/密码框的value可以不手动指定，网页表单填写的信息就是value值
单选/复选按钮、下拉菜单的value值必须手动指定
单选/复选按钮默认选中checked="checked"或简写成checked
下拉框默认选中selected="selected"或简写成selected
-->
<form action="http://loaclhost8080/jd/register" method="post">
用户名
<input type="text" name="username" />
<br />
密码
<input type="password" name="userpwd" />
<br />
确认密码
<input type="password" />
<br />
性别
<input type="radio" name="sex" value="male" checked="checked" />男
<input type="radio" name="sex" value="female" />女
<br />
兴趣爱好
<input type="checkbox" name="hobby" value="singing" />唱歌
<input type="checkbox" name="hobby" value="dancing" />跳舞
<input type="checkbox" name="hobby" value="running" checked="checked" />跑步
<input type="checkbox" name="hobby" value="swimming" />游泳
<input type="checkbox" name="hobby" value="climbing" />攀爬
<br />
学历
<select name="education">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk" selected="selected">本科</option>
<option value="ss">硕士</option>
<option value="bs">博士</option>
</select>
<br />
简介
<textarea rows="5" cols="30" name="briefIntroduction"></textarea>
<br />
<input type="submit" value="注册" />
<input type="reset" value="重置" />
<br />
</form>
</body>
</html>效果 演示：
2、用户注册表单 - 小升级
<html>
<head>
<meta charset="UTF-8">
<title>HTML用户注册表单-小升级</title>
</head>
<body>
<!--
enctype属性：规定了form表单在发送到服务器时的编码方式
有以下三个值：
application/x-www-form-urlencoded 默认编码方式
multipart/form-data 指定传输数据为二进制类型，如图片，mp3、文件
text/plain 空格转换为 "+"加号，但不对特殊字符编码
-->
<form action="http://loaclhost8080/jd/register" method="post" enctype="multipart/form-data">
<!--
hidden：隐藏域(在页面中用户不可见)
在表单中插入隐藏域目的是收集或发送信息，用户提交表单时，隐藏域的信息也会发送到服务器
-->
<input type="hidden" name="hiddenField" value="111" />
<!--readonly属性：规定输入字段只读，多用于认证名
readonly与disable的异同点：
相同点：readonly和disabled都是只读，不能修改
不同点：readonly的数据可提交给服务器，但disabled的数据不会提交 (即使有name属性也不会提交，所以name属性可以省略不写)
-->
用户编号
<input type="text" name="userid" value="10001" readonly="readonly" />
<br />
<!--input元素中的
placeholder属性：提示性文字(提供预期值的提示信息)
注：该提示会在输入字段为空时显示，并在字段获得焦点时消失。
size属性：规定(文本框/密码框)显示的长度大小
maxlength属性：规定实际能输入字段的长度
required属性：必填 必选 不为空
-->
用户名
<input type="text" name="username" placeholder="请设置用户名" size="20" maxlength="10" required="required" />
<br />
密码
<input type="password" name="userpwd" placeholder="请设置密码" />
<br />
确认密码
<input type="password" placeholder="请再次确认密码" />
<br />
<!--
label元素：用于表单元素的标注(标记)
在 label元素内点击文本，会触发相应的控件。
<label>标签的 for属性必须与相关元素的 id属性相同。
如下例子：使用label标签，点击选中文字"女"，会触发文字前面的单选按钮控件
-->
性别
<input type="radio" name="sex" value="male" checked="checked" id="male" />
<label for="male">男</lable>
<input type="radio" name="sex" value="female" id="female" />
<label for="female">女</label>
<br />
兴趣爱好
<input type="checkbox" name="hobby" value="singing" />唱歌
<input type="checkbox" name="hobby" value="dancing" />跳舞
<input type="checkbox" name="hobby" value="running" checked="checked" />跑步
<input type="checkbox" name="hobby" value="swimming" />游泳
<input type="checkbox" name="hobby" value="climbing" />攀爬
<br /><br />
学历
<select name="education">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk" selected="selected">本科</option>
<option value="ss">硕士</option>
<option value="bs">博士</option>
</select>
<br /><br />
<!--
下拉列表支持多选：multiple属性 multiple="multiple"
size属性：显示条目数
按住"Ctrl键"进行多选
-->
喜欢的颜色 (可多选) <br />
<select name="color" multiple="multiple" size="3">
<option value="black" selected="selected">黑色</option>
<option value="white">白色</option>
<option value="grey">灰色</option>
<option value="blue">蓝色</option>
<option value="red">红色</option>
<option value="pink">粉红色</option>
<option value="purple">紫色</option>
</select>
<br /><br />
简介 <br />
<textarea rows="5" cols="30" name="briefIntroduction" placeholder="自我介绍一下吧"></textarea>
<br /><br />
<!--
上传文件：<input type="file" />
同时在form标签中设置enctype="multipart/form-data"的编码方式
-->
上传文件
<input type="file" name="myfile" />
<br /><br />
<input type="submit" value="注册" />
<input type="reset" value="重置" />
<br />
</form>
</body>
</html>效果 演示：
3、HTML5表单新特性
① 新的input type
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5表单新特性</title>
</head>
<body>
<fieldset>
<lengend><b>HTML5表单新特性</b></lengend>
<form action="" method="post">
<!--
新的input元素的type属性的值
(自带简单的正则校验)
email：邮件(邮箱)
url：URL地址
tel：手机号
search：搜索
number：数字
range：数字滑块(范围选择)
color：颜色选择
-->
邮箱
<input type="email" />
<br />
URL
<input type="url" />
<br />
手机号
<input type="tel" />
<br />
搜索
<input type="search" />
<br />
数字
<input type="number" step="10" min="0" max="100" />
<br />
数字滑块
<input type="range" step="10" min="-50" max="50" />
<br />
颜色
<input type="color" />
<br />
<!--日期选择器：Date pickers
时间类型 示例 范围
time type="time" 小时 分钟
date type="date" 年 月 日
datetime type="datetime" 时间
month type="month" 年 月
week type="week" 年 星期
-->
时间分钟
<input type="time" />
<br />
年月日
<input type="date" />
<br />
时间
<input type="datetime" />
<br />
年月
<input type="month" />
<br />
年星期
<input type="week" />
<br />
<input type="submit" value="提交" />
<br />
</form>
</fieldset>
</body>
</html>效果 演示：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
