目录

​​一、表单标签​​

​​ 二、表单项标签​​

一、表单标签

HTML 表单用于搜集不同类型的用户输入。

表单：在网页中主要负责数据采集功能，使用<form>标签定义表单

表单项(元素)：不同类型的input元素，下拉列表、文本域等

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

标签

描述

<form>

定义表单

<input>

定义表单项，通过type属性控制输入形式

<label>

为表达项定义标注

<select>

定义下拉列表

<option>

定义下拉列表的列表项

<textarea>

定义文本域

form：定义表单

action：规定当提交表单时，向何处发送表单数据，URL

method：规定用于发送表单数据的方式

                get：浏览器会将数据直接附在表单的action URL之后。大小可以有限制

                post：浏览器会将数据放到http请求消息体中。大小无限制

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
from:
    action:指定表单数据提交的URL
        表单项数据要想提交，则必须指定其name属性
    method:指定表单提交方式
        1、get:默认值
            请求参数会拼接在URL后边
            url的长度有限制 4kb
        2、post
            请求参数会在http的请求体中
            请求参数无限制
-->
    <form action="#" method="post">
        <input type="text" name="username">
        <input type="submit">


    </form>
</body>
</html>

method默认值（get）提交结果：

HTML表单标签和表单项标签示例_开发语言

 method（post）提交结果：

HTML表单标签和表单项标签示例_elementui_02

 二、表单项标签

        表单项标签即表单的元素，最重要的表单元素就是<input>元素，<input>元素根据不同的type属性，可以变化为多种形态。

 <input>：表单项，通过type属性控制输入形式

<select>：定义下拉列表，<option>定义列表项

<textarea>：文本域

type取值

描述

text

默认值，定义单行的输入字段

password

定义密码字段

radio

定义单选按钮

checkbox

定义复选框

file

定义文件上传按钮

hidden

定义隐藏的输入字段

submit

定义提交按钮，提交按钮会把表单数据发送到服务器

reset

定义重置按钮，重置按钮会清除表单中的所有数据

button

定义可点击按钮

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="#" method="post">
    <input type="hidden" name="id" value="123">

    <label for="username">用户名</label>
    <input type="text" name="username" id="username"><br>

    <label for="password">密码</label>
    <input type="password" name="password" id="password"><br>

    性别：
    <input type="radio" name="gender" value="1" id="male"><label for="male">男</label>
    <input type="radio" name="gender" value="2" id="female"><label for="female">女</label>
    <br>

    爱好：
    <input type="checkbox" name="hobby" value="1">旅游
    <input type="checkbox" name="hobby" value="2">电影
    <input type="checkbox" name="hobby" value="3">游戏
    <br>

    头像：
    <input type="file"><br>

    城市：
    <select name="city">
        <option>北京</option>
        <option value="shanghai">上海</option>
        <option>广州</option>
    </select>
    <br>

    个人描述：
    <textarea cols="20" rows="5" name="desc"></textarea>
    <br>

    <br>
    <input type="submit" value="免费注册">
    <input type="reset" value="重置">
    <input type="button" value="一个按钮">
</form>
</body>
</html>

运行结果：

HTML表单标签和表单项标签示例_elementui_03