【HTML5-表单】

最新推荐文章于 2024-10-04 22:08:48 发布

原创最新推荐文章于 2024-10-04 22:08:48 发布 · 123 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

本文详细介绍了HTML中的表单元素，包括文本输入框、密码框、单选框、多选框、按钮、下拉框、文本域、文件域、邮件验证、URL验证、数字验证、滑块、搜索框等，并提供了相应的使用示例和属性说明，旨在帮助理解HTML表单的创建和交互功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求地址
method：post 比较安全 可以传输的大文件
        get  可以在url中看见提交的信息，不安全，高效
-->
<form action="FristHtml.html" method="post"></form>
  <!--文本输入框：input type="text"
  value： 默认初始值
  maxlength：最长能写几个字符
  size: 文本框的长度
  readonly : 只读
  hidden ： 隐藏域，虽然隐藏了，但值还在
  disable： 表单禁用
  placeholder="请输入名字" 提示信息 用于输入框中
  required 非空判断 要求输入框非空才能提交
  -->
  <p>名字：<input type="text" name="username" value="kim" maxlength="8" size="10" placeholder="请输入名字"></p>

  <!--密码框:input type="password"-->
  <p>密码:  <input type="password" name="pwd" required></p>

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

<!--多选框-->
  <p>爱好
      <input type="checkbox" value="sleep" name="hobby">睡觉
      <input type="checkbox" value="clde" name="hobby">编码
      <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="butn1" value="点击变长">
      <input type="image" src="../resources/1.jpg">
  </p>

<!--下拉框，列表框-->
  <p>下拉框
      <select name="国家">
          <option name="China">中国</option>
          <option name="US">美国</option>
          <option name="UK">英国</option>
      </select>
  </p>

<!--文本域-->
  <p>反馈：
     <textarea name="textare" cols="30" rows="20">文本内容</textarea>
  </p>

<!--文件域 表单元素都需要name属性
input type="file" name="files"
-->
  <p>
      <input type="file" name="files">
      <input type="button" name="upload" value="上传">
  </p>

<!--邮件验证
pattern="" 填正则表达式，用于验证输入框中输入的信息是否合法
可以通过网站查询 正则表达式
https://www.jb51.net/tools/regexsc.htm
-->
  <p>
      <input type="email" name="email">
      <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>
<!--url验证-->
  <p>
     <input type="url" name="url">
  </p>
<!--数字验证-->
  <p>
      <input type="number" name="number" max="50" 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>

  <p>
    <input type="submit">
    <input type="reset">
  </p>
</body>
</html>