HTML-08.表单标签

一.表单标签

场景:在网页中主要负责数据采集功能,如注册、登录等数据采集

标签:<form>

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

<input>:定义表单项。通过type属性控制输入形式

<select>:定义下拉列表

<textarea>:定义文本域

属性:

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

method:规定用于发送表单数据的方式。GET/POST

GET:表单拼接在URL后面,?username=年后&age=12,大小有限制。GET是默认提交方式

POST:表单数据在请求体中携带,大小没有限制。在消息体或者请求体中传递的

注意:表单项必须有name属性才能够提交

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
    <style>
    </style>
</head>
<body>
    <!-- 表单标签
        场景:在网页中主要负责数据采集功能,如注册、登录等数据采集
        标签:<form>
        表单项:不同类型的input元素、下拉列表、文本域等
            <input>:定义表单项。通过type属性控制输入形式
            <select>:定义下拉列表
            <textarea>:定义文本域
        属性:
            action:规定当提交表单时向何处发送表单数据,URL  
            method:规定用于发送表单数据的方式。GET/POST
                GET:表单拼接在URL后面,?username=年后&age=12,大小有限制。GET是默认提交方式
                POST:表单数据在请求体中携带,大小没有限制。在消息体或者请求体中传递的
        注意:表单项必须有name属性才能够提交
    -->
    <form action="" method="post">
        用户名 <input type="text" name="username">
        年龄 <input type="text" name="age">
        <input type="submit" value="提交" >
    </form>
</body>
</html>
相关推荐
梨想橙汁19 分钟前
Webpack 快速上手:前端工程化、打包原理、从零搭建基础项目
前端·webpack·前端工程化
zhanghaha131423 分钟前
HTML系列教程:12_HTML 表格 <table> 零基础详解
前端·html
Betterme27 分钟前
Vue3 竞态请求防护组合式hooks:useLatestRequest 设计思路
前端
_zhourui_h_30 分钟前
一个 [ECS] 到底生成了多少代码?EasyECS 最核心的秘密都在这里
前端
梨想橙汁33 分钟前
Git 分支详解:创建切换、合并分支、冲突解决实战
前端·git
雪芽蓝域zzs34 分钟前
Vue3 defineProps` / `defineEmits` 是编译器宏,不需要手动 import 导入
前端·javascript·vue.js
whyweplay39 分钟前
Elpis:从Json Schema 到 页面
前端·javascript
大牧师1 小时前
Nest.js 微服务入门教程
开发语言·javascript·后端·微服务·node.js·nest.js·nest
做萤石二次开发的哈哈1 小时前
海康班班通交互一体机技能接入实战:ISAPI透传+OTAP双协议封装,Web/App/小程序教学管理应用一站生成
前端·物联网·小程序·交互·萤石开放平台·蓝海aiot一站式工作台·aiot开发
计算机魔术师1 小时前
Anthropic一次性锁死十年算力,5170亿美元买什么
前端