HTML(11)表单（登陆注册）

表单（登陆注册）

表单元素格式

type

指定元素的类型，text，password，checkbox，radio，submit，reset，file，hidden，image和button，默认为text

name

指定表单元素的名称

value

元素的初始值，type为radio时必须指定一个值

size

指定表单元素的初始宽度，当type为text或password时，表单元素大小以字符为单位，对于其他类型，宽度以像素为单位

maxlength

type为text或password时，输入的最大字符数

checked

type为radio或checkbox时，指定按钮是否是被选中

表单的应用

隐藏域

hidden

只读

readonly

禁用

disabled

表单初级验证

常用方式

placeholder -->提示信息

required -->非空判断

pattern -->正则表达式

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>表单（登陆注册）</title>
 </head>
 <body>
 <!--表单form
 action ： 表单提交的位置，可以是网站，也可以是一个请求处理地址
 method ： post ， get 提交方式
             get方式提交 ： 我们可以在url中看到我们提交的信息，不安全，高效
             post ： 比较安全，传输大文件
 -->
 <form action="第一个网页.html" method="post">
 <!-- 文本输入框 ：input type = "text"
      value = ”“        --默认初始值
      maxlength = ”8“   --最长能写几个字符
      size = ”30“       --文本框长度
      readonly          --只读
 -->
   <p>名字 ： <input type="text" name="username" value="张三" readonly></p>
 ​
 <!-- 密码框 ：
 input type = "password"
 hidden    --隐藏
 -->
   <p>密码 ：<input type="password" name="pwd" hidden value="123456"></p>
 ​
   <!--单选框标签
   input type = ”radio“
   value ： 单选框的值
   name ： 表示组
   checked : 默认选项
   disabled ： 禁用
   -->
   <p>性别：
     <input type="radio" value="boy" name="sex" checked/>男
     <input type="radio" value="girl" name="sex" disabled/>女
   </p>
 ​
   <!--多选框
   input type = “checkbox”
   checked : 默认选项
   -->
   <p>爱好：
     <input type="checkbox" value="sleep" name="hobby" checked>睡觉
     <input type="checkbox" value="eat" name="hobby">吃
     <input type="checkbox" value="game" name="hobby">游戏
   </p>
 ​
   <!--按钮
   input type = “button”    --普通按钮
   input type = “image”     --图像按钮
   input type = “submit”    --提交按钮
   input type = “reset”     --重置
   -->
   <p>按钮：
     <input type="button" name="btn1" value="点击">
     <input type="image" src="../resources/image/mlgl.png">
   </p>
 ​
   <!--下拉框，列表框
   selected : 默认选项
   -->
   <p>国家
     <select name="列表名称" >
       <option value="china" selected>中国</option>
       <option value="us">美国</option>
       <option value="uk">英国</option>
     </select>
   </p>
 ​
   <!--文本域
   cols = “50” rows = “10”
   required   --非空判断
   -->
   <p>反馈：
     <textarea name="textarea" cols="50" rows="10" required>文本内容</textarea>
   <p>
 ​
   <!--文件域
   input type = "file" name = "files"
   -->
   <p>
   <input type="file"name="files">
   <input type="button" value="上传" name="upload">
   </p>
 ​
   <!-- 邮件验证 -->
   <p>邮件：
     <input type="email" name="email">
   </p>
 ​
   <!-- URL -->
   <p>URL
     <input type="URL" name="URL">
   </p>
 ​
   <!-- 数字 -->
   <p>商品数量
     <input type="number" name="num" max="100" min="1" step="1">
   </p>
 ​
   <!--滑块
   input type = "range"
   -->
   <p>
     <input type="range" name="voice" min="0" max="100" step="2">
   </p>
 ​
   <!--搜索框
    placeholder   --提示信息（应用在输入框空键）
    -->
   <p>搜索 ：
     <input type="search" name="search" placeholder="请输入" id="mark">
   </p>
 ​
   <!-- 增强鼠标可用性 -->
   <p>
     <label for="mark">点我到搜索栏</label>
   </p>
 ​
   <!-- 
  https://www.jb51.net/tools/regexsc.htm 
  --> 
  <p> 
    <input type="text" name="diymail" 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> 
​ 
    <input type="submit"> 
    <input type="reset"> 
  </p> 
​ 
</form> 
​ 
</body> 
</html>

 

 posted on 2021-06-16 23:23  琪琪又炸毛了  阅读(226)  评论(0)    收藏  举报