HTML5——设计一个表单

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

表单的基本要素

• 文本框

• 单选框和多选框

• 按钮

• 文本域和文件域

• 搜索滑框和简单验证

• 初级验证

表单：

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

method：提交方式，有post，get两种

get方式提交：提交后可以在url中看到我们填写的信息（账号，密码等），会不安全，但是高效，不能传输大文件

post方式提交：不能看到我们填写的信息，比较安全，也可以传输大文件

<form action="媒体元素.html" method="get" > 

账号框：

表单的初级验证：

placeholder 提示信息

required 非空判断

pattern：正则表达式验证

<p>账号：<input type="number" name="id" placeholder="请输入账号" required></p>

文本输入框：

value:设置默认值

maxlength：最大字符长度

size：输入框的尺寸

readonly:只读

<p>名字：<input type="text" name="username" value="NASA" maxlength="5" size="30" readonly/> </p> 

密码框

hidden:隐藏域，可以传递默认值

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

单选框标签

value：单选框的值

name：组，name的值要相同才算在一个组，才能单选

checked:默认选择

<p>性别：
      <input type="radio" value="boy" name="sex" checked/>男 
      <input type="radio" value="girl" name="sex"/>女
 </p>

多选框标签

<p>爱好：
          <input type="checkbox" value="sleep" name="hobby">睡觉
          <input type="checkbox" value="code" name="hobby">敲代码
          <input type="checkbox" value="playgame" name="hobby">打游戏
          <input type="checkbox" value="chat" name="hobby">聊天
 </p>

按钮

input type="button" 普通按钮

input type="image" 图片按钮

input type="submit" 提交按钮

input type="reset" 重置按钮

      <p>按钮：
          <input type="button" value="点击升级" name="btn1">
          <input type="button" value="点击强化" name="btn2">
          <input type="button" value="点击升阶" name="btn3">
  <!--        <input type="image" src="../resources\image\1.jpg" >-->
      </p>

下拉框select，列表框option

selected：默认选择

  <p>国籍：
      <select name="下拉选择" >
          <option value="chain" selected>中国</option>
          <option value="usa">美国</option>
          <option value="english">英国</option>
          <option value="Germany">德国</option>
          <option value="France">法国</option>
      </select>
  </p>

文本域textarea

      <p>用户反馈：
          <textarea name="textyu"  cols="30" rows="10">文本内容</textarea>
      </p>

文件域

      <p>
          <input type="file" name="files" >
          <input type="button" value="点击上传" name="upload">
      </p>

邮箱验证

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

自定义邮箱

      <p>正则表达式邮箱验证：
          <input type="email" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"  >
      </p>
            <!--url验证-->
      <p>url验证：
          <input type="url" name="url"  >
      </p>
  
      <!--数字验证-->
      <p>数字验证：
          <input type="number" name="number" max="100" min="10" step="5"  >
      </p>

滑块

      <p>音量
          <input type="range" name="voice" max="100" min="0" step="5">
      </p>

搜索框

      <p>搜索
          <input type="search" name="search" >
      </p>

提交和重置

disabled:禁用

     <p>
      <input type="submit" disabled/>
      <input type="reset"/>
  </p>

表单最终效果图