写在前面

html表单

知识点

  • HTML 表单概述
  • 发送表单数据
  • 表单验证
  • 构建 HTML 表单
  • 原生表单组件

HTML 表单概述

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：

  • 表单标签：这里面包含了处理表单数据所用 CGI 程序的 URL 以及数据提交到服务器的方法。
  • 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
  • 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的 CGI 脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
<form name="form_name" method="get/post" action="url">
</form>
  • name：定义表单的名字。
  • method：定义表单结果从浏览器传送到服务器的方式，默认参数为：get 。post 安全性更高，因此常用作传输密码等，而 get 安全性较低，一般用于查询数据。
  • action：用来指定表单处理程序的位置(服务器端脚本处理程序）。

action 属性

定义了发送数据要去的地址。它的值必须是一个有效的 URL，可以是相对 URL 也可以是绝对 URL。如果没有提供此属性或者action=”#”，则数据将被发送到包含表单的页面的 URL。

<form action="https://www.shiyanlou.com/">
<!--数据发送到一个绝对URL：https://www.shiyanlou.com/-->

<form action="/somewhere_else">
<!-- 数据发送到一个相对URL -->

<form action="#">
<!-- 数据被发送到表单出现的相同页面上 -->

get方法

浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。

<form action="https://www.zxyaily.top/" method="get">
   <div>
       <label for="say">What do you want to say?</label>
       <input name="say" id="say" value="hello">
   </div>
   <div>
       <label for="to">Where do you want to go?</label>
       <input name="to" id="to" value="China">
   </div>
   <div>
       <button>发送数据</button>
   </div>
</form>

post方法

使用 post 方法。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。在服务器端，一旦 post 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。

注：使用 get 请求用户将在他们的 URL 栏中看到数据，但是使用 post 请求用户将不会看到。因此一般 get 用于查询数据， post 用于传输密码等。

表单验证

表单验证帮助我们确保用户以正确格式填写表单数据，确保提交的数据能使我们的应用程序正常工作。生活中我们经常会注册账号，而在注册时，你是否也遇到过诸如：“该行不能为空”，“请输入正确的电话号码”，“请输入正确的邮箱号码”，“确认密码不一致，请重新输入”之类的提示，这些就属于我们的表单验证。

使用内置表单数据验证

HTML5 一个特别有用的新功能就是，可以在不写一行脚本代码的情况下，即对用户的输入进行数据校验，这都是通过表单元素的校验属性实现的，这些属性可以让你定义一些规则，用于限定用户的输入。比如我们前面所学到的 e-mail 输入框，就会要求我们输入有效的 e-mail 地址。

required 属性

输入值不能为空,如果输入值为空，将会提示错误信息。

<form>
    <label for="place">Where you want to go?</label>
    <input id="place" name="place" required>
    <button>Submit</button>
</form>

强制条目的长度

所有文本框 (<input> 或 <textarea>) 可以强制使用 minlength 和 maxlength 属性，如果值小于该字段 minlength 的值或大于 maxlength 值则无效。

<form>
    <div>
        <label for="number">Which number would you like?</label>
        <input type="number" id="number" name="number" value="1" min="1" max="10">
    </div>
    <div>
        <button>Submit</button>
    </div>
</form>

原生表单组件

主要包含文本输入框、单行文本框、e-mail 输入框、密码输入框、搜索框、电话号码输入框、URL 输入框、多行文本框、下拉组件、可勾选组件、按钮。

文本输入框（input）

HTML 文本框只是个纯文本输入控件。意味着不能用它来进行富文本编辑（如加粗、斜体等）。

文本域的通用规范：

  • 它们可以被标记为 readonly (用户不能修改输入值)甚至是 disabled (输入值永远不会与表单数据的其余部分一起发送)。
  • 它们可以有一个 placeholder; 这是文本输入框中出现的文本，用来简略描述输入框的目的。
  • 它们都受 size (输入框的物理尺寸) 和 length (文本框可以输入的最大字符数)约束。
  • 如果浏览器支持的话，可以进行拼写检查。

单行文本框

<input type="text" id="text" name="text" value="I'm a text">

e-mail 输入框

设置 multiple 属性，这种输入框也可以让用户输入多个 e-mail 地址(多个 e-mail 地址之间用逗号隔开)。

<input type="email" id="email" name="email" multiple>

密码输入框

<input type="password" id="pwd" name="pwd">

搜索框

<input type="search" id="search" name="search">

电话号码输入框

<input type="tel" id="tel" name="tel">

URL 输入框

<input type="url" id="url" name="url">

多行文本框

<textarea cols="每行中的字符数" rows="显示的行数"></textarea>

下拉组件

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

自动补全组件

使用元素来为表单小部件提供建议的、自动完成的值，并使用一些

一旦数据列表与表单小部件相关联，它的选项用于自动完成用户输入的文本。通常，这是作为一个下拉框向用户展示的，在输入框中输入可能匹配的内容。

<label for="myColor">What's your favorite color?</label>
<input type="text" name="myColor" id="myColor" list="mySuggestion">
<datalist id="mySuggestion">
    <option>black</option>
    <option>blue</option>
    <option>green</option>
    <option>red</option>
    <option>black</option>
    <option>yellow</option>
</datalist>

可勾选组件

表单提交后所有具有 name 属性的组件都会被提交

复选框

<input type="checkbox" checked>

单选框

<input type="radio" checked>

几个单选按钮可以连接在一起,只需要把它们的 name 值设置为相同的。同一组中只有一个按钮可以同时被选。如果没有选中任何一个，那么整个单选按钮池就被认为处于未知状态，且不会随表单提交。
例子：

<fieldset>
    <legend>What is your favorite color?</legend>
    <ul>
        <li>
            <label for="red">red</label>
            <input type="radio" checked id="red" name="color" value="red">
        </li>
        <li>
            <label for="yellow">yellow</label>
            <input type="radio" id="yellow" name="color" value="yellow">
        </li>
        <li>
            <label for="blue">blue</label>
            <input type="radio" id="blue" name="color" value="blue">
        </li>
    </ul>
</fieldset>

按钮

提交按钮（submit）

<button type="submit">
    This a submit button
</button>
<input type="submit" value="This is a submit button">

重置按钮（reset）

<button type="reset">
    This a reset button
</button>
<input type="reset" value="This is a reset button">

匿名按钮（button）

没有自动生效的按钮，但是可以使用 JavaScript 代码进行定制。如果你省略了 type 属性，那么这就是默认值。

<button type="button">
    This a anonymous button
</button>
<input type="button" value="This is a anonymous button">
赏

zxyaily