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

346 阅读1分钟

目录

一、表单标签

 二、表单项标签


一、表单标签

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

表单:在网页中主要负责数据采集功能,使用

标签定义表单

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

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

image.png

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)提交结果:

 二、表单项标签

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

image.png

image.png 代码示例:

<!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>

运行结果:

​编辑