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

夏志121

于 2022-05-03 17:57:26 发布

阅读量991

点赞数 4

分类专栏： Web前端开发与Vue.js实践文章标签： html elementui vue.js 前端开发语言

本文链接：https://blog.csdn.net/m0_61961937/article/details/124556783

版权

Web前端开发与Vue.js实践专栏收录该内容

35 篇文章 5 订阅

订阅专栏

一、表单标签

二、表单项标签

一、表单标签

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）提交结果：

method（post）提交结果：

二、表单项标签

表单项标签即表单的元素，最重要的表单元素就是<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>

运行结果：