表单语法

<h1>注册</h1>

<!--表单form
acrion:表单提交的位置；可以是网站，也可以是一个请求处理地址
method:post, get提交方式
    get方式提交：我们可以在url中看到我们提交的信息：不安全（会在url中显示输入内容），高效
    post方式提交：比较安全（但在“检查”中可查看），可以传输大文件

-->
<form method="get" action="我的第一个网页.html">
<!--  文本输入框: input type="text"-->
  <p>名字：<input type="text" name="username"></p>

<!--  密码框：input type="password"-->
  <p>密码：<input type="password" name="pwd"></p>
  <p>
    <input type="submit">
    <input type="reset">
</form>


  • “检查”网页
  • 点击 Network
  • 点击Name下的内容
  • 点击Headers即可得到通用信息
    • 200代表成功

属性 说明
type 指定元素的类型。text、password、checkbox多选框、radio单选框、submit、reset、file、hidden、image和button，默认为text
name 表单元素的名称
value 元素的初始值，type为radio时必须指定一个初始值
size 略
maxlength type为text或password时，输入的最大字符数
checked type为radio或checkbox时，指定按钮是否被选中 
<form method="get" action="我的第一个网页.html">
<!--  文本输入框: input type="text"
  value:“帅帅帅”默认初始值
  maxlength: 最长能写几个字符
  size: 文本框的长度
-->
  <p>名字：<input type="text" name="username" value="帅帅帅" maxlength="6" size="10"></p>

单选框

radio单选框，如果不把多个单选框放在一个组内，则与多选框无差异

当name相同时，为同一个组

<!--  单选框标签
input type='radio'
value:单选框的值
name：表示组
checked:默认选中
-->
<p>性别：</p>
  <input type="radio" value="boy" name="sex" checked/>男
  <input type="radio" va1ue="girl" name="sex">女
<p>

多选框

<!--  多选框
    input type="checkbox"
    结果会以组的数组返回
    -->
  <p>爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="code" name="hobby">敲代码
    <input type="checkbox" value="chat" 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/1.png">
  </p>
    <input type="submit">
    <input type="reset">

文件域

<!--  文件域
input type="file" name="files"
-->
<p>
  <input type="file" name="files">
</p>

邮箱、URL、数字验证、滑块、搜索框

  <!--  邮件验证-->
  <p>邮箱：
    <input type="email" name="Mail">
  </p>
  <!--  url-->
  <p>URL:
    <input type="url" name="uurl">
  </p>
<!--  数字验证-->
  <p>数字：
    <input type="number" name="num" max="10" min="0">
  </p>
<!--滑块
step:步长
-->
  <p>音量
    <input type="range" name="voice" min="0" max="100" step="2">
  </p>
  
<!--  搜索框-->
  <p>搜索：
    <input type="search" name="sreach">
  </p>

下拉框


<!--  下拉框，列表框
selected:默认选择
-->
  <p>下拉框
    <select name="列表名称">
      <option value="china">中国</option>
      <option value="US">美国</option>
      <option value="eth" selected>瑞士</option>
      <option value="Jp">日本</option>
    </select>

文本域

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

表单的应用

  • 隐藏域

hidden

不可见了，但实际存在，可以用于传递默认值

  <p>密码：<input type="password" name="pwd" hidden></p>
  • 只读 readonly
  <p>名字：<input type="text" name="username" value="帅帅帅" readonly></p>
  • 禁用
<input type="radio" va1ue="girl" name="sex" disabled>女

表单如何进行验证

在前端进行简单的验证

  • placeholder 提示信息（文本框内灰色字）
  • required 非空判断，不能为空
  • pattern 正则表达式
<!--  验证：正则表达式-->
  <p>
    <input type="email" name="diymail" pattern="去网上查">
  </p>