HTML-6.表单学习—如何做一个注册（登录）网页

(2)账号：（input,text）

(3)密码：(input,password)

(4)提交：(imput,submit)

(5)重置：(input,reset)

(6)知识点

(7)单选框标签：(input,radio)

(8)多选框：(input,checkbox)

(9)按钮(input,button)

(10)列表框（下拉框）(select,option)

(11)文本域：(textarea)

(12)文件域：(input,file)

(13)邮件验证：(input,email)

(14)网址验证：(input,url)

(15)数字验证(商品数量)：(input,number)

(16)滑块(音量)：(input,range)

(17)搜索：(input,search)

(18)表单的应用：(readonly,hidden,disabled)

(19)增强鼠标可用性：(laber)

(20)表单验证(减轻服务器压力)：

代码

页面

(1)表单制作（包括整个表单）（form）

<form action="表单提交的位置，可以是网站也可以是一个请求处理地址"

method="get或post表示提交方式"></form>

get方式提交：我们可以在url（网址）中看到登录密码等，安全性较低但是高效，不能传输大文件

post方式提交：比较安全，可以传输大文件

(2)账号：（input,text）

<input type="text" name="username">，表示输入文本框,以及给文本框命名

(3)密码：(input,password)

<input type="password" name="pwd">,表示密码框，其中name=pwd,s是自己命名,密码框是点点表示的

(4)提交：(imput,submit)

<input type="submit">,提交

(5)重置：(input,reset)

<input type="reset" value="输入按钮显示的文字"/>，重置

(6)知识点

value="表示默认初始值" maxlength="用户可输入的文字有多少个" size="表示文本框长度"

(7)单选框标签：(input,radio)

<input type="radio" value="输入名称，表示选中要显示的文字的值"

name="输入相同文字表示同一组" checked（表示默认的）/>输入要显示的文字

<input type="radio" value="输入名称，表示选中要显示的文字的值"

name="输入相同文字表示同一组"/>输入要显示的文字

(8)多选框：(input,checkbox)

<input type="checkbox" value="输入名称，表示选中要显示的文字的值"

name="输入相同文字表示同一组"/>输入要显示的文字

<input type="checkbox" value="输入名称，表示选中要显示的文字的值"

name="输入相同文字表示同一组" checked(表示默认选中的值)/>输入要显示的文字

<input type="checkbox" value="输入名称，表示选中要显示的文字的值"

name="输入相同文字表示同一组"/>输入要显示的文字

<input type="checkbox" value="输入名称，表示选中要显示的文字的值"

name="输入相同文字表示同一组"/>输入要显示的文字

(9)按钮(input,button)

<input type="button" name="输入名称，表示选中要显示的文字的值"

value="输入要显示的文字的初始值"/>

<input type="image" scr="表示要显示的图片的路径，点击后会跳转页面"/>

(10)列表框（下拉框）(select,option)

<select name="列表名称" id="">

<option value="印度">印度</option>

<option value="美国">美国</option>

<option value="英国">英国</option>

<option value="中国" selected（表示默认值）>中国</option>

</select>

(11)文本域：(textarea)

<textarea name="自定义名字，一般用英文，用中文会出现乱码" cols="表示列长"

rows="表示行长">文本框的初始内容</textarea>

(12)文件域：(input,file)

选择文件：<input type="file" name="输入要显示的名字">

上传按钮:<input type="button" name="输入要显示地名字" value="输入按钮的名字">

(13)邮件验证：(input,email)

<input type="email" name="自定义名字，最好用英文避免乱码">

(14)网址验证：(input,url)

<input type="url" name="自定义名字，最好用英文避免乱码">

(15)数字验证(商品数量)：(input,number)

<input type="number" name="自定义名字，最好用英文避免乱码" max="最大值"

min="最小值" step="阶度">

(16)滑块(音量)：(input,range)

<input type="range" name="自定义名字，最好用英文避免乱码" min="最大值"

max="最小值" step="2">

(17)搜索：(input,search)

<input type="search" name="自定义名字，最好用英文避免乱码">

(18)表单的应用：(readonly,hidden,disabled)

只读：readonly

隐藏域：hidden

禁用：disabled

(19)增强鼠标可用性：(laber)

<label for="mark">你点我试试吧</label>

<input type="text" id="mark">

(20)表单验证(减轻服务器压力)：

placeholder:提示信息

required:非空，表示一定要填

pattern:正则表达式，在网页搜索复制https://www.jb51.net/tools/regexsc.htm

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录注册</title>
</head>
<body><!--表单
(1)<form action="表单提交的位置，可以是网站也可以是一个请求处理地址" method="get或post表示提交方式"></form>get方式提交：我们可以在url（网址）中看到登录密码等，安全性较低但是高效，不能传输大文件post方式提交：比较安全，可以传输大文件
(2)账号：<input type="text" name="username">，表示输入文本框,以及给文本框命名
(3)密码：<input type="password" name="pwd">,表示密码框，其中name=pwd,s是自己命名,密码框是点点表示的
(4)提交：<input type="submit">,提交
(5)重置：<input type="reset" value="输入按钮显示的文字"/>，重置
(6)value="表示默认初始值" maxlength="用户可输入的文字有多少个" size="表示文本框长度"
(7)单选框标签：<input type="radio" value="输入名称，表示选中要显示的文字的值" name="输入相同文字表示同一组" checked（表示默认的）/>输入要显示的文字<input type="radio" value="输入名称，表示选中要显示的文字的值" name="输入相同文字表示同一组"/>输入要显示的文字
(8)多选框：<input type="checkbox" value="输入名称，表示选中要显示的文字的值" name="输入相同文字表示同一组"/>输入要显示的文字<input type="checkbox" value="输入名称，表示选中要显示的文字的值" name="输入相同文字表示同一组" checked(表示默认选中的值)/>输入要显示的文字<input type="checkbox" value="输入名称，表示选中要显示的文字的值" name="输入相同文字表示同一组"/>输入要显示的文字<input type="checkbox" value="输入名称，表示选中要显示的文字的值" name="输入相同文字表示同一组"/>输入要显示的文字
(9)按钮<input type="button" name="输入名称，表示选中要显示的文字的值" value="输入要显示的文字的初始值"/><input type="image" scr="表示要显示的图片的路径，点击后会跳转页面"/>
(10)列表框（下拉框）<select name="列表名称" id=""><option value="印度">印度</option><option value="美国">美国</option><option value="英国">英国</option><option value="中国" selected（表示默认值）>中国</option></select>
(11)文本域：<textarea name="自定义名字，一般用英文，用中文会出现乱码"  cols="表示列长" rows="表示行长">文本框的初始内容</textarea>
(12)文件域：选择文件：<input type="file" name="输入要显示的名字">上传按钮:<input type="button" name="输入要显示地名字" value="输入按钮的名字">
(13)邮件验证：<input type="email" name="自定义名字，最好用英文避免乱码">
(14)网址验证：<input type="url" name="自定义名字，最好用英文避免乱码">
(15)数字验证(商品数量)：<input type="number" name="自定义名字，最好用英文避免乱码" max="最大值" min="最小值" step="阶度">
(16)滑块(音量)：<input type="range"  name="自定义名字，最好用英文避免乱码" min="最大值" max="最小值" step="2">
(17)搜索：<input type="search" name="自定义名字，最好用英文避免乱码">
(18)表单的应用：
只读：readonly
隐藏域：hidden
禁用：disabled
(19)增强鼠标可用性：<label for="mark">你点我试试吧</label><input type="text" id="mark">
(20)表单验证(减轻服务器压力)：
placeholder:提示信息
required:非空，表示一定要填
pattern:正则表达式，在网页搜索复制https://www.jb51.net/tools/regexsc.htm
-->
<h1>注册</h1>
<form action="我的第一个网页.html" method="get">
<p>名字：<input type="text" name="username"  maxlength="8" size="30" placeholder="请输入用户名" aria-label=""></p>
<p>密码：<input type="password" name="pwd" aria-label="22222" required></p>
<p>性别：<input type="radio" value="boy" name="sex" checked aria-label=""/>男<input type="radio" value="girl" name="sex" disabled aria-label=""/>女
</p>
<p>擅长的科目<input type="checkbox" value="math" name="subject" aria-label=""/>数学<input type="checkbox" value="English" name="subject" aria-label=""/>英语<input type="checkbox" value="Chinese" name="subject" checked aria-label=""/>语文<input type="checkbox" value="biology" name="subject" aria-label=""/>生物
</p>
<p>按钮<input type="button" name="btn1" value="点击" aria-label=""><input type="image" src="../resources/image1/HTML图片标签.jpg" width="20" height="20" alt="" aria-label="">
</p>
<p>国家选择<select name="列表名称" id="" aria-label=""><option value="印度">印度</option><option value="美国">美国</option><option value="英国">英国</option><option value="中国" selected>中国</option></select>
</p>
<p>反馈：<textarea name="textarea"  cols="30" rows="10" aria-label="" readonly>文本内容</textarea>
</p>
<p><input type="file" name="files" aria-label=""><input type="button" name="upload" value="上传" aria-label="">
</p>
<p>邮箱：<input type="email" name="email" aria-label="">
</p>
<p>URL(网址)：<input type="url" name="url" aria-label="">
</p>
<p>数字验证(商品数量)：<input type="number" name="num" max="500" min="100" step="10" aria-label="">
</p>
<p>滑块(音量)：<input type="range"  name="voice" min="0" max="100" step="2" aria-label="">
</p>
<p>搜索：<input type="search" name="search" aria-label="">
</p>
<p>增强鼠标可用性：<label for="mark">你点我试试吧</label><input type="text" id="mark" aria-label="">
</p><p>正则表达式：<input type="text" name="diyemaile" aria-label="" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></p>
<p><input type="submit" aria-label=""><input type="reset" value="清空表单" aria-label=""></p>
</form>
</body>
</html>

页面

HTML表单学习