HTML-表单

时间：2021-05-24 09:46:29 阅读：0 评论：0 收藏：0 [点我收藏+]

标签：网站 form 正则表达式 tag arch read pos 提示信息 length

表单

input标签中都要写上name养成习惯

表单form中必须要写的是action和method

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

method：只有post和get两种提交方式

表单的元素：文本框、单选框、多选框、下拉框（列表框）、文本域、文件域、搜索框、简单验证

表达的元素格式：

type：指定元素类型。text、password、checkbox（多选）、radio（单选）、submit（提交按钮）、reset（重置按钮）、file、hidden（隐藏的）、image、button，默认是text
name：指定表单元素的名称（必填）
value：元素的初始值，当type为radio的时候必须指定一个值
size：指定表单元素的初始宽度。type为test和password的时候，大小单位是字符；其他类型的时候单位是像素
maxlength：type为test和password的时候，输入的最大字符数
checked：type是radio或者checkbox的时，指定按钮是否被选中

<!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="https://baidu.com" method="post">
  <!--文本输入框：<input type="text"
  value="木之本樱" :默认数值
  maxlength="10"：最长输入字符
  size="30"：文本框的长度
  -->
  <p> 名字：<input type="text" name="username" value="木之本樱"  readonly maxlength="10" size="30"></p>
  <!--密码框：<input type="password"-->
  <p> 密码：<input type="password" name="password" hidden value="123456"></p>
?
  <!--单选框标签
  input type="radio"
  value：单选框的值
  name：表示组
  -->
  <p>性别：
      <input type="radio" value="boy" name="sex"/>男
      <input type="radio" value="girl" name="sex" checked/>女
  </p>
?
  <!--多选框
  input type="checkbox"
  -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby" checked>睡觉
        <input type="checkbox" value="game" name="hobby">游戏
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="girl" 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.jpg">-->
?
    </p>
?
    <!--下拉框，列表框
    -->
    <p>地区：
        <select name="area" >
            <option value="SZ" selected>苏州</option>
            <option value="SH">上海</option>
            <option value="NJ">南京</option>
            <option value="SZ">深圳</option>
        </select>
    </p>
?
    <!--文本域-->
    <p>反馈：
        <textarea name="textarea" cols="30" rows="10" disabled>文本内容</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>
?
    <!--数字
    step:系统给的自动加减的数值-->
    <p>商品数量:
        <input type="number" name="num" max="100" min="0" step="1">
    </p>
?
    <!--滑块
    input type="range"
    -->
    <p>音量：
        <input type="range" name="voice" max="100" min="0" step="1">
    </p>
?
    <!--搜索框,多了一个x可以删除输入的文本-->
    <p>搜索：
        <input type="search" name="search">
    </p>
?
    <!--增强鼠标可用性-->
    <p>
        <label for="mark">点我一下</label>
        <input type="text" id="mark">
    </p>
?
?
?
<!--所有表单元素都需要name元素-->
  <p>
      <input type="submit" value="注册">
      <input type="reset" >
  </p>
?
</form>
</body>
</html>

表单的应用

只读：readonly

<p> 名字：<input type="text" name="username" value="木之本樱"  readonly maxlength="10" size="30"></p>

禁用：disable

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

隐藏：hidden（虽然隐藏了但是还存在，还有这个属性）

可以通过隐藏密码框来提交默认值

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

增强鼠标可用性：label

for要指向id

<p>
    <label for="mark">点我一下</label>
    <input type="text" id="mark">
</p>

表单的初级验证

初级验证可以增加安全性

提示信息：placeholder（用在所有的输入框中）

<p>邮箱:
    <input type="email" name="email" placeholder="请输入邮箱">
</p>

非空判断：required（所有的文本框中）

<p>URL:
    <input type="url" name="url" required>
</p>

正则表达式：pattern（即用即查）

<p>
        <input type="text" id="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>

HTML-表单

标签：网站 form 正则表达式 tag arch read pos 提示信息 length

原文地址：https://www.cnblogs.com/Share-my-life/p/14769852.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行