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）

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

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

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

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

(2)账号：（input,text）

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

(3)密码：(input,password)

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

(4)提交：(imput,submit)

type="submit">,提交

(5)重置：(input,reset)

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

(6)知识点

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(9)按钮(input,button)

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

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

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

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

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

        value="印度">印度

        value="美国">美国

        value="英国">英国

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

(11)文本域：(textarea)

 <span style="color:#548235;">name</span>="自定义名字，一般用英文，用中文会出现乱码"  <span style="color:#548235;">cols</span>="表示列长"</strong></p> <p style="margin-left:0;text-align:justify;"><strong><span style="color:#548235;"> rows</span>="表示行长"<span style="color:#7030a0;">></span>文本框的初始内容<span style="color:#7030a0;">

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

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

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

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

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

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

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

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

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

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

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

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

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

(17)搜索：(input,search)

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

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

只读：readonly

隐藏域：hidden

禁用：disabled

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

    for="mark">你点我试试吧

     type="text" id="mark">

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

placeholder:提示信息

required:非空，表示一定要填

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

代码

    
    




注册

名字：
密码：
性别：
    男
    女

擅长的科目
    数学
    英语
    语文
    生物

按钮
    
    

国家选择
    
        印度
        美国
        英国
        中国
    

反馈：
    文本内容


    
    

邮箱：
    

URL(网址)：
    

数字验证(商品数量)：
    

滑块(音量)：
    

搜索：
    

增强鼠标可用性：
    你点我试试吧
    

    
正则表达式：
        
    

    
    

页面

HTML表单学习