HTML4（三）：表单

zdb呀2024-05-13 19:53

文章目录

  • 表单
    • [1. 基本结构](#1. 基本结构)
    • [2. 常用表单控件](#2. 常用表单控件)
      • [2.1 文本输入框](#2.1 文本输入框)
      • [2.2 密码输入框](#2.2 密码输入框)
      • [2.3 单选框](#2.3 单选框)
      • [2.4 复选框](#2.4 复选框)
      • [2.5 隐藏域](#2.5 隐藏域)
      • [2.6 提交按钮](#2.6 提交按钮)
      • [2.7 重置按钮](#2.7 重置按钮)
      • [2.8 普通按钮](#2.8 普通按钮)
      • [2.9 文本域](#2.9 文本域)
      • [2.10 下拉框](#2.10 下拉框)
      • [2.11 示例](#2.11 示例)
    • [3. 禁用表单控件](#3. 禁用表单控件)
    • [4. lable标签](#4. lable标签)
    • [5. fieldset与legend标签](#5. fieldset与legend标签)
    • [6. 总结](#6. 总结)

表单

概念：一种包含交互的区域，用于手机用户提供的数据。

1. 基本结构

例：

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单_基本结构</title>
</head>
<body>
    <form action="https://www.baidu.com/s">
        <input type="text" name="wd">
        <button>去百度搜索</button>
    </form>
    <hr>
    <form action="https://search.jd.com/search" target="_self" method="get">
        <input type="text" name="keyword">
        <button>去京东搜索</button>
    </form>
    <hr>
    <a href="https://search.jd.com/search?keyword=手机">搜索手机</a>
</body>
</html>

2. 常用表单控件

2.1 文本输入框

html 复制代码 
<input type="text">

2.2 密码输入框

html 复制代码 
<input type="password">

2.3 单选框

html 复制代码 
<input type="radio" name="sex" value="female">女
<input type="ratio" name="sex" value="male">男

2.4 复选框

html 复制代码 
<input type="checkbox" name="hobby" value="smoke">抽样
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头

2.5 隐藏域

html 复制代码 
<input type="hidden" name="tag" value="100">

2.6 提交按钮

html 复制代码 
<!--方法一-->
<input type="submit" value="点我提交表单">

<!--方法二-->
<button>点我提交表单</button>

2.7 重置按钮

html 复制代码 
<!--方法一-->
<input type="reset" value="点我重置">

<!--方法二-->
<button type="reset">点我重置</button>

2.8 普通按钮

html 复制代码 
<!--方法一-->
<input type="button" value="普通按钮">

<!--方法二-->
<button type="button">普通按钮</button>

2.9 文本域

html 复制代码 
<textarea name="msg" rows="22" cols="3">我是文本域</textarea>

2.10 下拉框

html 复制代码 
<select name="from">
	<option value="黑">黑龙江</option>
	<option value="辽">辽宁</option>
	<option value="吉">吉林</option>
	<option value="粤" selected>广东</option>
</select>

2.11 示例

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单_常用控件</title>
</head>
<body>
    <form action="https://search.jd.com/search">
        <!-- 文本输入框 -->
        账户：<input type="text" name="account" value="zhangsan" maxlength="10"><br>
        <!-- 密码输入框 -->
        密码：<input type="password" name="pwd" value="123" maxlength="6"><br>
        <!-- 单选框 -->
        性别：
        <input type="radio" name="gender" value="male">男 
        <input type="radio" name="gender" value="female" checked>女<br>
        <!-- 多选框 -->
        爱好：
        <input type="checkbox" name="hobby" value="smoke" checked>抽烟
        <input type="checkbox" name="hobby" value="drink">喝酒
        <input type="checkbox" name="hobby" value="perm" checked>烫头<br>
        其他：
        <textarea name="other" cols="23" rows="3"></textarea><br>
        籍贯：
        <select name="place">
            <option value="冀">河北</option>
            <option value="鲁">山东</option>
            <option value="晋" selected>山西</option>
            <option value="粤">广东</option>
        </select>
        <!-- 隐藏域 -->
        <input type="hidden" name="from" value="toutiao">
        <br>
        <!-- 确认按钮_第一种写法 -->
        <button type="submit">确认</button>
        <!-- 确认按钮_第二种写法 -->
        <!-- <input type="submit" value="确认"> -->
        <!-- 重置按钮_第一种写法 -->
        <!-- <button type="reset">重置</button> -->
        <!-- 重置按钮_第二种写法 -->
        <input type="reset" value="点我重置">
        <!-- 普通按钮_第一种写法 -->
        <input type="button" value="检测账户是否被注册">
        <!-- 普通按钮_第二种写法 -->
        <!-- <button type="button">检测账户是否被注册</button> -->
    </form>
</body>
</html>

3. 禁用表单控件

例：

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单_禁用表单控件</title>
</head>
<body>
    <form action="https://search.jd.com/search">
        <!-- 文本输入框 -->
        账户：<input disabled type="text" name="account" value="zhangsan" maxlength="10"><br>
        <!-- 密码输入框 -->
        密码：<input type="password" name="pwd" value="123" maxlength="6"><br>
        <!-- 单选框 -->
        性别：
        <input type="radio" name="gender" value="male">男 
        <input type="radio" name="gender" value="female" checked>女<br>
        <!-- 多选框 -->
        爱好：
        <input type="checkbox" name="hobby" value="smoke" checked>抽烟
        <input type="checkbox" name="hobby" value="drink">喝酒
        <input type="checkbox" name="hobby" value="perm" checked>烫头<br>
        其他：
        <textarea name="other" cols="23" rows="3"></textarea><br>
        籍贯：
        <select name="place">
            <option value="冀">河北</option>
            <option value="鲁">山东</option>
            <option value="晋" selected>山西</option>
            <option value="粤">广东</option>
        </select>
        <!-- 隐藏域 -->
        <input type="hidden" name="from" value="toutiao">
        <br>
        <!-- 确认按钮_第一种写法 -->
        <button type="submit">确认</button>
        <!-- 确认按钮_第二种写法 -->
        <!-- <input type="submit" value="确认"> -->
        <!-- 重置按钮_第一种写法 -->
        <!-- <button type="reset">重置</button> -->
        <!-- 重置按钮_第二种写法 -->
        <input type="reset" value="点我重置">
        <!-- 普通按钮_第一种写法 -->
        <input disabled type="button" value="检测账户是否被注册">
        <!-- 普通按钮_第二种写法 -->
        <!-- <button type="button">检测账户是否被注册</button> -->
    </form>
</body>
</html>

4. lable标签

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单_label标签</title>
</head>
<body>
    <form action="https://search.jd.com/search">
        <label for="zhanghu">账户：</label>
        <input id="zhanghu" type="text" name="account" maxlength="10"><br>
        <label>
            密码：
            <input id="mima" type="password" name="pwd" maxlength="6">
        </label>
        <br>
        性别：
        <input type="radio" name="gender" value="male" id="nan">
        <label for="nan">男</label> 
        <label>
            <input type="radio" name="gender" value="female" id="nv">女
        </label>
        <br>
        爱好：
        <label>
            <input type="checkbox" name="hobby" value="smoke">抽烟
        </label>
        <label>
            <input type="checkbox" name="hobby" value="drink">喝酒
        </label>
        <label>
            <input type="checkbox" name="hobby" value="perm">烫头
        </label><br>
        <label for="qita">其他：</label>
        <textarea id="qita" name="other" cols="23" rows="3"></textarea><br>
        籍贯：
        <select name="place">
            <option value="冀">河北</option>
            <option value="鲁">山东</option>
            <option value="晋">山西</option>
            <option value="粤">广东</option>
        </select>
        <input type="hidden" name="from" value="toutiao">
        <br>
        <input type="submit" value="确认">
        <input type="reset" value="点我重置">
        <input type="button" value="检测账户是否被注册">
    </form>
</body>
</html>

5. fieldset与legend标签

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单_fieldset与legend</title>
</head>
<body>
    <form action="https://search.jd.com/search">
        <!-- 主要信息 -->
        <fieldset>
            <legend>主要信息</legend>
            <label for="zhanghu">账户：</label>
            <input id="zhanghu" type="text" name="account" maxlength="10"><br>
            <label>
                密码：
                <input id="mima" type="password" name="pwd" maxlength="6">
            </label>
            <br>
            性别：
            <input type="radio" name="gender" value="male" id="nan">
            <label for="nan">男</label> 
            <label>
                <input type="radio" name="gender" value="female" id="nv">女
            </label>
        </fieldset>
        <br>
        <fieldset>
            <legend>附加信息</legend>
            爱好：
            <label>
                <input type="checkbox" name="hobby" value="smoke">抽烟
            </label>
            <label>
                <input type="checkbox" name="hobby" value="drink">喝酒
            </label>
            <label>
                <input type="checkbox" name="hobby" value="perm">烫头
            </label><br>
            <label for="qita">其他：</label>
            <textarea id="qita" name="other" cols="23" rows="3"></textarea><br>
            籍贯：
            <select name="place">
                <option value="冀">河北</option>
                <option value="鲁">山东</option>
                <option value="晋">山西</option>
                <option value="粤">广东</option>
            </select>
        </fieldset>
        <input type="hidden" name="from" value="toutiao">
        <br>
        <input type="submit" value="确认">
        <input type="reset" value="点我重置">
        <input type="button" value="检测账户是否被注册">
    </form>
</body>
</html>

6. 总结

相关推荐
陈逸子风21 天前
（系列十三）Vue3+Echarts搭建超好看的系统面板
vue3·webapi·权限·流程·表单
陈逸子风1 个月前
（系列十二）Vue3+.Net8实现用户登录（超详细登录文档）
vue3·webapi·权限·流程·表单
一条晒干的咸魚1 个月前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
_xaboy1 个月前
开源动态表单form-create-designer 扩展个性化配置的最佳实践教程
vue.js·低代码·开源·动态表单·表单·formcreate·低代码表单
陈逸子风1 个月前
（系列十一）Vue3框架中路由守卫及请求拦截（实现前后端交互）
vue3·webapi·权限·流程·表单
亿牛云爬虫专家1 个月前
如何在Puppeteer中实现表单自动填写与提交：问卷调查
javascript·爬虫·爬虫代理·puppeteer·问卷调查·代理ip·表单
杨浦老苏2 个月前
开源表单生成器OpnForm
docker·群晖·表单
Jiaberrr3 个月前
uniapp实战教程：如何封装一个可复用的表单组件
javascript·笔记·前端框架·uni-app·表单
陈逸子风3 个月前
从0到1搭建权限管理系统系列四 .net8 中Autofac的使用（附源码）
vue3·webapi·权限·流程·表单
Amd7944 个月前
使用 nuxi add 快速创建 Nuxt 应用组件
api·开发·组件·nuxt·插件·布局·页面
热门推荐
01VSCode插件 —— Cody AI （免费AI助手！）02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04SQL 主从数据库实时备份05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07ARM学习（31）编译器对overlay方式的支持08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10组基轨迹建模 GBTM的介绍与实现（Stata 或 R）