003_用户注册表单【HTML-form表单】

文章目录

- - 一、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>