html表单1:表单基础

表单

网页中的一个交互区域

form表单标签属性

action:选择将表单传递给谁处理

target:选择跳到那个页面(_self/_blank...)

method:选择请求方式

input输入控件

type="text"表示为输入框 ,name属性中传入接收方规定的参数

value代表输入框中的默认值

maxlength属性代表输入的最大长度

button按钮控件
代码如下
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="https://www.baidu.com/s" target="_self" method="get">
        <!-- action选择将表单传给谁处理 -->
        <!-- target选择跳到哪个页面 -->
        <!-- method选择请求方式 -->
        <input type="text" name="wd" id="">
        <!-- 输入框 name中需要传递接收方规定的参数 -->
        <button>搜索</button>
        <!-- 按钮 -->
    </form>
    <form action="https://search.jd.com/search" target="_blank">
        <!-- 选择将表单传给谁处理 -->
        <input type="text" name="keyword" id="">
        <!-- 输入框 name中需要传递接收方规定的参数 -->
        <button>搜索</button>
        <!-- 按钮 -->
    </form>
    <form action="">
        账户: <input type="text" name ="account" value="ooo" maxlength="10"><br>
        密码: <input type="password" name ="password" value="123"><br>
        <button>确认</button>
    </form>
</body>
</html>
相关推荐
xiaobaoyu11 分钟前
谈谈你对iframe的了解
前端
爱勇宝30 分钟前
我做了一个排版器,也踩了一遍富文本复制的坑
前端·后端·微信
铁皮饭盒42 分钟前
面试官:如何用 Bun + JS 实现安全的文件 MCP 工具集
前端·javascript·后端
探索前端1 小时前
Cesium图层加载及影像服务添加
前端·cesium
阿懂在掘金1 小时前
Vue 弹窗新范式——代码减少、复用翻倍与 AI 时代的前端基建
前端·设计模式·前端框架
千纸鹤安安1 小时前
Compose Runtime → KuiklyUI:Applier 搭起的渲染桥梁
前端
李明卫杭州1 小时前
mise 管理工具详解
前端·后端
颜进强1 小时前
从零搭建私人 RAG 实战:让 Claude Code 按需查询知识库
前端·后端·ai编程
程序员黑豆2 小时前
鸿蒙应用开发:Scroll 组件从入门到实战
前端·华为·harmonyos
a1117763 小时前
三色软糖坠落玻璃池 THreeJS kimi
前端·人工智能·threejs