表单

表单语法

表单元素格式

表单的应用

  • 隐藏域 hidden

  • 只读 readonly

  • 禁用 disabled

表单初级验证

  • 思考：为什么要进行表单验证

  • 常用方式：

    • placeholder 提示信息

    • required 非空判断

    • pattern 正则表达式

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>

<!--form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
    post：比较安全，传输大文件
-->

<form action="1.我的第一个HTML网页.html" method="get">

<!--文本输入框：<input type="text"
value="杨不悔终身不悔" 默认初始值
 maxlength="8" 最长能写几个字符
 size="30" 文本框的长度
 readonly 只读
 > -->
<p> 名字：<input type="text" name="username"  placeholder="请输入用户名" required></p>

<!--密码框：<input type="password">-->
<p>密码：<input type="password" name="pwd" hidden value="123456"></p>

<!--单选框:
input type="radio":
value :单选框的值
name :表示组
-->
<p>性别：
        <input type="radio" value="boy" name="sex" checked disabled/>男
        <input type="radio" value="girl" name="sex"/>女
</p>

<!--多选框
input type="checkbox"
-->
    <p>爱好
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="play" name="hobby" checked>玩
        <input type="checkbox" value="read" 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/img.png" >
</p>

<!--下拉框，列表框
-->
<p>国家：
    <select name="列表名称" >
        <option value="china">中国</option>
        <option value="us">美国</option>
        <option value="rus" selected>俄罗斯</option>
        <option value="Japan">日本</option>
    </select>
</p>

<!--文本域
cols="30" rows="10" 列和行
-->
<p>反馈:
    <textarea name="textarea"  cols="30" rows="10">文本内容</textarea>
</p>

<!--文件域
input type="file"
-->
  <p>
      <input type="file" name="files">
      <input type="button" value="上传" name="upload" >
  </p>

<!--邮箱验证-->
<p>邮箱：
    <input type="email" name="email" required>
</p>

 <!--url-->
 <p>url：
     <input type="url" name="url" required>
 </p>

<!--数字-->
<p>商品数量：
    <input type="number" name="num" max="100" min="0" step="1">
</p>

<!--滑块-->
<p>滑块：
    <input type="range" name="voice" max="100" min="0" step="1">
</p>

<!--搜索框-->
<p>搜索框:
    <input type="search" name="search">
</p>

    <p>
<!--增强鼠标可用性-->
    <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>

    <p>自定义邮箱：
        <input type="email" name="diyeeail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>
    
 <p>
     <input type="submit">
     <input type="reset" value="清空表单">
 </p>

</form>

</body>
</html>

 

posted @ 2022-02-28 23:19  少时凌云志  阅读(20)  评论(0)    收藏  举报