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. 总结

相关推荐
杨浦老苏17 天前
开源表单生成器OpnForm
docker·群晖·表单
Jiaberrr1 个月前
uniapp实战教程：如何封装一个可复用的表单组件
javascript·笔记·前端框架·uni-app·表单
陈逸子风1 个月前
从0到1搭建权限管理系统系列四 .net8 中Autofac的使用（附源码）
vue3·webapi·权限·流程·表单
Amd7942 个月前
使用 nuxi add 快速创建 Nuxt 应用组件
api·开发·组件·nuxt·插件·布局·页面
Amd7942 个月前
如何在 Nuxt 中动态设置页面布局
中间件·路由·nuxt·布局·设置·动态·页面
凉风听雪3 个月前
HTML原生手搓询盘
前端·javascript·css·html·form·表单·询盘
易道云之逍遥峰3 个月前
开源免费的表单收集系统TDuck
低代码·开源·表单
core5123 个月前
SQLynx数据库管理工具
数据库·web·管理·页面·sqlynx
陈逸子风4 个月前
（开源）都进来！简单易懂、功能强大的权限+可视化流程管理系统
vue3·webapi·权限·流程·表单
ChristopherKeith4 个月前
低代码表单配置平台替代普通表单配置平台，前端部分重构的设计和思路
前端·低代码·重构·vue·平台·表单
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play