HTML4(三):表单

文章目录

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

表单

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

1. 基本结构

在这里插入图片描述
例:

<!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 文本输入框

<input type="text">

在这里插入图片描述

2.2 密码输入框

<input type="password">

在这里插入图片描述

2.3 单选框

<input type="radio" name="sex" value="female"><input type="ratio" name="sex" value="male">

在这里插入图片描述

2.4 复选框

<input type="checkbox" name="hobby" value="smoke">抽样
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头

在这里插入图片描述

2.5 隐藏域

<input type="hidden" name="tag" value="100">

在这里插入图片描述

2.6 提交按钮

<!--方法一-->
<input type="submit" value="点我提交表单"><!--方法二-->
<button>点我提交表单</button>

在这里插入图片描述

2.7 重置按钮

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

在这里插入图片描述

2.8 普通按钮

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

在这里插入图片描述

2.9 文本域

<textarea name="msg" rows="22" cols="3">我是文本域</textarea>

在这里插入图片描述

2.10 下拉框

<select name="from"><option value="">黑龙江</option><option value="">辽宁</option><option value="">吉林</option><option value="" selected>广东</option>
</select>

在这里插入图片描述

2.11 示例

<!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. 禁用表单控件

在这里插入图片描述

例:

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

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

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/11377.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Raft论文阅读笔记+翻译:In Search of Understandable Consensus Algorithm

In Search of Understandable Consensus Algorithm 摘要 Raft是一种管理复制日志的共识算法。它产生与&#xff08;多&#xff09;Paxos等效的结果&#xff0c;并且与Paxos一样高效&#xff0c;但其结构与Paxos不同。这使得Raft比Paxos更易理解&#xff0c;也为构建实际系统提供…

近屿OJAC带你解读:什么是大模型幻觉?

忠实性幻觉也可以细分&#xff0c;分为指令不一致&#xff08;输出偏离用户指令&#xff09;、上下文不一致&#xff08;输出与上下文信息不符&#xff09;、逻辑不一致三类&#xff08;推理步骤以及与最终答案之间的不一致&#xff09;。 具体解析 大模型产生幻觉的原因可能…

国内使用 CloudFlare 避坑指南

最近明月收到了不少新手使用 CloudFlare 的求助,发现很多首次使用 CloudFlare 的甚至包括已经在使用 CloudFlare 的站长们对 CloudFlare 的使用有很多的误区,再加上国内简中互联网上有关 CloudFlare 的教程良莠不齐,更是加深了新手使用 CloudFlare 入坑的概率,让一些别有用…

Today At Apple 20240512 学习拍照

文章目录 微距打开模式设置曝光值人像模式设置光模式实况 官网&#xff1a; https://www.apple.com/today/Apple 亚洲第一大商店&#xff1a;Apple 静安零售店现已在上海开幕如下预约课程&#xff1a;下载apple store&#xff08;不是app store&#xff09;&#xff0c;点击课程…

进程间的IPC通信机制

一、介绍 进程与进程间的用户空间相互独立&#xff0c;内核空间共享。 1.传统的进程间通信机制 a.无名管道 pipe b.有名管道 fifo c.信号 signal 2.system V中的IPC对象 a.消息队列 message queue b.共享内存 shared memory c.信号灯集 semaphoare 3.可用于跨主机传输…

vue前端时间段选择控件

实现效果: 可选具体的某天的某时某分某秒 vue前端代码: <el-form-item label"日期"><el-date-pickerv-model"daterangerq"style"width: 240px"value-format"yyyy-MM-dd HH:mm:ss"type"datetimerange"range-separat…

JetsonNano —— 3、在Nano板卡编译可硬件加速FFmpeg,测试FFmpeg调用nvmpi编解码器加速

最终FFmpeg运行加速效果如下: FFmpeg 简介 一个完整的跨平台解决方案,用于录制、转换和流式传输音频和视频。   JetsonNano 简介 NVIDIA Jetson Nano为数百万台高性能、低功耗设备提供前所未有的功能。这项技术创新为网络录像机、机器人或具有高级分析功能的智能家居网关等…

基于SPWM控制策略的二极管钳位型NPC逆变器的并网simulink仿真

本人搭建了二极管钳位型NPC并网逆变器simulink仿真模型&#xff0c;该模型型采用d、q轴&#xff0c;电压前馈解耦控制&#xff0c;三相逆变并网&#xff0c;PI控制&#xff0c;仿真复现&#xff0c;效果优异&#xff0c;适合新手学习使用。 模型获取链接&#xff1a;基于SPWM…

【MySQL探索之旅】JDBC (Java连接MySQL数据库)

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》 |《Web世界探险家》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更…

探索免费静态IP海外的奥秘

在数字化时代&#xff0c;网络资源的获取和利用对于个人和企业都至关重要。其中&#xff0c;独立静态IP地址更是因其稳定性和安全性备受青睐。本文将带您深入了解“免费的独立静态IP海外”的奥秘&#xff0c;探讨其背后的原理、优势、获取途径以及使用场景。 一、独立静态IP的基…

XEChat-Idea:摸鱼神器!!【送源码】

XEChat-Idea ❝ 基于Netty的IDEA即时聊天插件 ❞ 项目介绍 主要功能&#xff1a; 即时聊天 游戏对战 即时聊天 idea摸鱼工具 idea斗地主 项目结构 . ├── LICENSE ├── README.md ├── xechat-commons //公共模块 │ ├── pom.xml │ └── src ├── xech…

文本分类的深度注意图扩散网络 笔记

1 Title Deep Attention Diffusion Graph Neural Networks for Text Classification&#xff08;Yonghao Liu、Renchu Guan、Fausto Giunchiglia、Yanchun Liang、Xiaoyue Feng&#xff09;【EMnlp 2021】 2 Conclusion Text classification is a fundamental task with broad…

Linux-- 重定向缓冲区

目录 0.接上篇文章 1.粗略的见一下这两个问题 2.理解重定向 3.理解缓冲区 0.接上篇文章 Linux--基础IO&#xff08;文件描述符fd&#xff09;-CSDN博客 1.粗略的见一下这两个问题 先来了解几个函数&#xff1a; stat()函数用于获取指定文件或符号链接的元数据。如果文件是…

Android 系统省电软件分析

1、硬件耗电 主要有&#xff1a; 1、屏幕 2、CPU 3、WLAN 4、感应器 5、GPS(目前我们没有) 电量其实是目前手持设备最宝贵的资源之一&#xff0c;大多数设备都需要不断的充电来维持继续使用。不幸的是&#xff0c;对于开发者来说&#xff0c;电量优化是他们最后才会考虑的的事情…

【C++】详解STL的适配器容器之一:优先级队列 priority_queue

目录 堆算法 概述 向下调整建堆 向上调整建堆 建堆算法 仿函数 概述 使用介绍 emtpy size top push pop 模拟实现 仿函数 框架 向下调整算法 向上调整算法 pop push empty top 要理解优先级队列&#xff0c;需要有如下知识 STL容器之一的vector&#xf…

聚类分析 | 基于GA遗传算法优化kmeans聚类(Matlab)

聚类分析 | 基于GA遗传算法优化kmeans聚类&#xff08;Matlab&#xff09; 目录 聚类分析 | 基于GA遗传算法优化kmeans聚类&#xff08;Matlab&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 GA-kmeans聚类算法&#xff0c;通过GA遗传算法优化kmeans聚类&…

【python】模块与包

Python中的模块和包是组织和管理代码的重要工具。通过模块和包&#xff0c;你可以更好地管理和重用你的代码&#xff0c;使得代码更加模块化和可维护。 目录 前言 正文 一、模块 1、模块的分类 1&#xff09;内置模块 python解释器中默认拥有的模块可以直接使用&#xff08;…

用户需求甄别和筛选的6大标准

产品经理日常经常接收到大量的需求&#xff0c;并不是所有的需求都需要开发&#xff0c;需要进行甄别和筛选&#xff0c;这样有利于确保项目的成功、优化资源利用以及提高产品质量。 那么针对这些用户需求进行甄别或筛选的评判标准是什么&#xff1f;需求筛选可以说是初步的需求…

代码随想录-算法训练营day31【贪心算法01:理论基础、分发饼干、摆动序列、最大子序和】

代码随想录-035期-算法训练营【博客笔记汇总表】-CSDN博客 第八章 贪心算法 part01● 理论基础 ● 455.分发饼干 ● 376. 摆动序列 ● 53. 最大子序和 贪心算法其实就是没有什么规律可言&#xff0c;所以大家了解贪心算法 就了解它没有规律的本质就够了。 不用花心思去研究其…

C++牛客周赛题目分享(2)小红叕战小紫,小红的数组移动,小红的素数合并,小红的子序列求和

目录 ​编辑 1.前言 2.四道题目 1.小红叕战小紫 1.题目描述 2.输入描述 3.输出描述 4.示例 5.题解与思路 2.小红的数组移动 1.题目描述 2.输入描述 3.输出描述 4.示例 5.题解与思路 3.小红的素数合并 1.题目描述 2.输入描述 3.输出描述 4.示例 5.题解与思…