HTML-表单

Posted Si人

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML-表单相关的知识，希望对你有一定的参考价值。

表单

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-表单的主要内容，如果未能解决你的问题，请参考以下文章

十个html5代码片段，超实用，一定要收藏

如何使子表单行项目在 zoho creator 片段页面的 HTML 表格中仅出现一次？

Laravel：如何在控制器的几种方法中重用代码片段

Python Tornado初学笔记之表单与模板

SpringBoot中表单提交报错“Content type ‘application/x-www-form-urlencoded；charset=UTF-8‘ not supported“(代码片段

Xamarin 表单 - 侧边菜单左侧栏、片段和列表视图