HTML 学习笔记(十一)表单

一、分块

1.单行文本框控件–文本框和密码框

  文本框控件通过单标签input实现，其具有必要属性type来控制输入控件的类型(默认为text即文本信息)，密码框的type为password(口令)。
  表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理，比如将表单信息提交到一个新的页面中。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>table</title></head><body><form action="">请输入用户名：<input type="text"> <br>请输入密码：<input type="password"></form></body>
</html>

在这里插入图片描述

2.多行文本框控件(文本域控件)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>table</title></head><body><form action="">请输入多行文本：<-- 可以通过cols和rows属性控制文本框的大小 --><textarea cols="50" rows="5"></textarea></form></body>
</html>

在这里插入图片描述

3.单选和多选

通过控制input标签中type的属性值来实现单选或多选

a.单选

1.单选框必须成组使用才有意义(每组数量大于等于2)
2.通过name属性来建立组，同名为一组
3.同组的单选框只能有一个处于被选中的状态

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>table</title></head><body><form action="">选择性别：<input name="sex" type="radio">男<input name="sex" type="radio">女</form></body>
</html>

在这里插入图片描述

b.多选

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>table</title></head><body><form action="">前端基础包括：<input type="checkbox">HTML<input type="checkbox">CSS<input type="checkbox">Java-Script</form></body>
</html>

在这里插入图片描述
默认选中效果通过checked属性来实现，简单来说只定义一个属性名即可

4.下拉菜单控件

通过select标签实现，其包含一个或者多个option子标签(select中只能放置option标签)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>table</title></head><body><form action="">出生日期：<select><!-- option{199$}*9 --><option value="">1991</option><option value="">1992</option><option value="">1993</option><option value="">1994</option><option value="">1995</option><option value="">1996</option><option value="">1997</option><option value="">1998</option><option value="" selected>1999</option><!-- 可以通过在指定option中加入selected属性(仅有属性名即可)，来指定默认选项 --></select><br></form></body>		
</html>

在这里插入图片描述
可以通过在select中增加一个multiple属性来实现下拉框的多选(通过按住ctrl和鼠标点击实现)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>table</title></head><body><form action="">一个多选的下拉菜单控件：<br><select name="" id="" multiple size="3"><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><option value="">7</option><option value="">8</option></select><!-- 通过给select标签定义size属性来实现控件的默认可见行数 --></form></body>
</html>

在这里插入图片描述

5.文件选择控件

通过在input中定义type属性值为file

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>form</title></head><body><form action="">附件：<input type="file"></form></body>
</html>

在这里插入图片描述

6.label标签

通过给输入语句添加label标签从而实现焦点效果(点击输入文字时将输入框选定为焦点)

`

form `![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/ae4209474cc44dd08fa4e56e9e35c52c.png) ## 7.只读效果的设置 通过给控件定义一个readonly属性来实现 
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>form</title></head><body><form action="">请输入用户名：<!-- 通过value设置默认值 --><input type="text" readonly value="183****6278"></form></body>
</html>

在这里插入图片描述

8.表单控件中禁用的设置

通过添加disable属性进行禁用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>form</title></head><body><form action="">请选择性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<input type="radio" name="sex" disabled>未知</form></body>
</html>

在这里插入图片描述

9.表单的分组控件

通过fieldset对表单进行分组，并通过legend指定表单的标题

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>form</title></head><body><fieldset><legend>基础信息</legend>请输入用户名：<input type="text"><br>请选择性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<input type="radio" name="sex" disabled>未知</fieldset></body>
</html>

在这里插入图片描述

10.表单按钮

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>form</title></head><body><!--  按钮分类：提交，重制，普通，图像和双标签button按钮 --><form action="https://baidu.com" target="_self"><!-- action按钮所指定的用户点击提交按钮后要做什么动作，若不定义action值，则其默认为当前页面的地址 --><!-- 通过指定target的属性值从而控制页面的跳转方式，_blank即在新页面中打开，_self为在当前页面中跳转 -->姓名：<input type="text"> <br>邮箱：<input type="text"> <br><!-- 通过设置type="submit"生成提交按钮 --><input type="submit"><!-- 通过设置type="reset"生成重制按钮 --><input type="reset"><!-- 通过设置type="button"生成普通按钮 --><input type="button" value="普通按钮"><!-- 同样的，提交按钮和重制按钮均可通过指定其value属性从而更改其显示名称 --><!-- 通过设置type="image"生成图像按钮，src指定对应图片路径 --><!-- 如此这般这般如此，点击狗头，表单提交 --><!-- 同时可以通过width和height属性设置图片的大小 --><input type="image" src="dog1.jpg" width="50" height="50"><!-- 双标签button按钮默认具有提交表单的功能 --><button>button按钮</button><!-- 添加属性type并赋值button后其就变为了普通按钮，不再具备提交功能 --><button type="button">普通的button按钮</button></form></body>
</html>

在这里插入图片描述

二、整合案例

<!-- 疫情流调信息表案例 -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>疫情流调信息表实例</title></head><body><h1 align="center">疫情流调信息表实例</h1><p>&emsp;&emsp;如果您去过疫情地区请及时通知居委会</p><form action=""><fieldset><legend>基本信息</legend><h3>1.您的姓名</h3> <input type="text"> <br><h3>2.您的手机号码</h3> <input type="password"> <br><h3>3.您的性别</h3> <input type="radio" name="sex">男<input type="radio" name="sex">女<input type="radio" name="sex" disabled>保密 <br><h3>4.家庭住址</h3> <select><option value="">河北省</option><option value="">广东省</option><option value="">新疆维吾尔自治区</option><option value="" selected>****请选择省、自治区或直辖市****</option></select><select><option value="">1</option><option value="">2</option><option value="">3</option><option value="" selected>****市****</option></select><select><option value="">1</option><option value="">2</option><option value="">3</option><option value="" selected>****区、县****</option></select> <br><textarea name="" id="" cols="70" rows="10">请输入详细地址：</textarea><h3>5.您现在的身体状况</h3><input type="checkbox">健康 <br><input type="checkbox">发热 <br><input type="checkbox">干咳 <br><input type="checkbox">四肢乏力 <br><input type="checkbox">呼吸困难 <br><h3>6.您的健康码颜色是</h3><input type="radio" name="color">绿色 <input type="radio" name="color">黄色<input type="radio" name="color">红色 <br><h3>7.您是否在14天内有过中高风险地区旅居史,或与就诊人员有过密切接触?</h3><input type="radio" name="tf">是<input type="radio" name="tf">否<h3>8.您的疫苗接种情况</h3><input type="radio" name="num">已接种一针<input type="radio" name="num">已接种二针<input type="radio" name="num">已接种三针 <br></fieldset><fieldset><legend>保密信息</legend><h3>1.身份证信息</h3>正面：<input type="file"><br>反面：<input type="file"><br><h3>2.学历信息</h3><select><option value="">中专</option><option value="">大专</option><option value="">本科</option><option value="">研究生</option><option value="">博士</option><option value="" selected>****请选择学历****</option></select><h3>3.是否服兵役</h3><input type="radio" name="123">是<input type="radio" name="123">否 <br><h3>4.个人意见</h3><textarea name="" id="" cols="70" rows="20" ></textarea></fieldset><input type="submit"><input type="reset"><input type="image" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.EU0K_QyBuIr_jnShvb21GAHaGV" width="50" height="50"></form></body>
</html>

在这里插入图片描述

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

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

相关文章

Docker 安装部署MySQL教程

Docker 安装部署MySQL教程

前言 Docker安装MySQL镜像以及启动容器&#xff0c;大致都是三步&#xff1a;查询镜像–>拉取镜像–>启动容器 1、查询镜像 docker search mysql2、拉取镜像 拉取镜像时选择stars值较高的 docker pull mysql:5.7 #这里指定拉取对应的版本Mysql5.7&#xff0c;没有指…
阅读更多...
ArcGIS学习（十六）基于交通网络的城市情景分析

ArcGIS学习（十六）基于交通网络的城市情景分析

ArcGIS学习（十六）基于交通网络的城市情景分析 本任务给大家带来一个非常重要的内容一一基于交通网络的城市情景分析。基于交通网络模拟交通出行并进行相关分析是ArcGIS里面一种常用的分析方法，大家一定要掌握！本任务包括三个关卡： 交通网络模型构建基于交通网络模型的基本…
阅读更多...
Gitlab CICD 下载artifacts文件并用allure打开，或bat文件打开

Gitlab CICD 下载artifacts文件并用allure打开，或bat文件打开

allure命令行打开aritfacts报告 首先下载allure.zip&#xff0c;并解压 配置环境变量 使用命令行打开allure文件夹 allure open 2024-03-11-14-54-40 2024-03-11-14-54-40 包含index.html Bat文件打开artifacts There are 2 html reports in the download artifacts.zip S…
阅读更多...
EXCEL根据某列的数字N，增加N-1行相同的数据

EXCEL根据某列的数字N，增加N-1行相同的数据

因为工作需要&#xff0c;需要将表格数据拆分&#xff0c;类似于相同的订单有6笔&#xff0c;数据表中就是一行数据但是订单数为6&#xff0c;但是需要将其拆分成相同6笔的订单数为1的数据行。 需要使用VBA代码&#xff0c;具体做法如下&#xff1a; Dim i As Long, j As Long…
阅读更多...
Rust接收命令行参数和新建文件读写和追加操作与IO

Rust接收命令行参数和新建文件读写和追加操作与IO

接收命令行参数 命令行程序是计算机程序最基础的存在形式&#xff0c;几乎所有的操作系统都支持命令行程序并将可视化程序的运行基于命令行机制。 命令行程序必须能够接收来自命令行环境的参数&#xff0c;这些参数往往在一条命令行的命令之后以空格符分隔。 在很多语言中&a…
阅读更多...
使用 ChatGPT 写高考作文

使用 ChatGPT 写高考作文

写作文&#xff0c;很简单&#xff0c;但写一篇好的作文&#xff0c;是非常有难度的。 想要写一篇高分作文&#xff0c;需要对作文题目有正确的理解&#xff0c;需要展现独到的观点和深入的思考&#xff0c;需要具备清晰的逻辑结构&#xff0c;需要准确而得体的语言表达。 正…
阅读更多...
云服务器租用4核16G配置价格表，阿里云和腾讯云费用价格对比

云服务器租用4核16G配置价格表，阿里云和腾讯云费用价格对比

4核16G服务器租用优惠价格26元1个月&#xff0c;腾讯云轻量4核16G12M服务器32元1个月、96元3个月、156元6个月、312元一年&#xff0c;阿腾云atengyun.com分享4核16服务器租用费用价格表&#xff0c;阿里云和腾讯云详细配置报价和性能参数表&#xff1a; 腾讯云4核16G服务器价…
阅读更多...
2021年中国环境统计年鉴、工业企业污染排放数据库

2021年中国环境统计年鉴、工业企业污染排放数据库

《中国环境统计年鉴》是国家统计局和生态环境部及其他有关部委共同编辑完成的一本反映我国环境各领域基本情况的年度综合统计资料。收录了上一年年全国各省、自治区、直辖市环境各领域的基本数据和主要年份的全国主要环境统计数据。 内容共分为十二个部分,即:1.自然状况;2.水环…
阅读更多...
电脑切屏卡顿，尤其是打游戏时切屏卡顿问题解决方法

电脑切屏卡顿，尤其是打游戏时切屏卡顿问题解决方法

博主在打游戏时喜欢切后台但是最近发现切屏尤其慢&#xff0c;异常卡顿&#xff0c;但是是新换的电脑&#xff0c;所以苦恼了半天&#xff0c;上网搜也没有结果&#xff0c;说的都是些配置低&#xff0c;系统文件损坏等问题&#xff0c;所以再检查分辨率时发现问题所在 屏幕分辨…
阅读更多...
##天气预报爬虫 项目

##天气预报爬虫 项目

//主要功能 #include "head.h" #include "cJSON.h"void FunWeather(void); void RecvSendWeather(void); int RealTimeWeather(void); int CreateTcpClient(char *p,int port); int SendHttpRequest(int sockfd,char *q); void RecvSendWeather(void);char…
阅读更多...
1.6什么是“空洞卷积”？简述空洞卷积的设计思路

1.6什么是“空洞卷积”？简述空洞卷积的设计思路

1.6 简述空洞卷积的设计思路 背景&#xff1a;在语义分割(Semantic Segmentation)任务中&#xff0c;一般需要先缩小特征图尺寸&#xff0c;做信息聚合&#xff1b; 然后再复原到之前的尺寸&#xff0c;最终返回与原始图像尺寸相同的分割结果图。 问题&#xff1a;常见的语义分…
阅读更多...
AI新工具(20240311) 国内免费使用Claude 3 Sonnet；Pika推出视频加音效功能

AI新工具(20240311) 国内免费使用Claude 3 Sonnet；Pika推出视频加音效功能

1: 国内免费使用Claude 3 Sonnet Claude 3现已登陆Amazon Bedrock&#xff0c;国内就能够免费使用&#xff0c;以下是网友整理的使用流程。 地址&#xff1a;https://lab.amazoncloud.cn/ 2: Pika Sound Effects Pika推出视频加音效功能&#xff0c;为视频创作带来声音定制…
阅读更多...
python请求url下载网站中的视频

python请求url下载网站中的视频

举例网站&#xff1a;Mini Impresora Trmica Bluetooth Porttil Inalmbrico | Envo gratis ctrlF4 先搜mp4 搜不到就搜m3u8 了 视频格式如下 &#xff08; AVI&#xff08;Audio Video Interleave&#xff09;&#xff1a;是一种由微软公司开发的音频和视频文件格式。MOV&…
阅读更多...
Django环境下使用Ajax

Django环境下使用Ajax

Django环境下使用Ajax 目录 Django环境下使用Ajax介绍前情提要示例JS实现Ajax实现 传递JSON格式数据传递文件数据Django自带的序列化组件基于jsonresponse序列化数据基于Django自带的serializers 注册示例 介绍 AJAX 的主要目标是在不刷新整个页面的情况下&#xff0c;通过后台…
阅读更多...
面具安装LSP模块时提示 Unzip error错误的解决办法

面具安装LSP模块时提示 Unzip error错误的解决办法

面具(Magisk Delta)安装LSP模块时提示 Unzip error错误的解决办法 ​​ 如果前面的配置都正常的话&#xff0c;可能是LSP版本有问题重新去Github下载一个最新版的吧&#xff1b;我是这么解决的。 我安装1.91那个版本的LSP就是死活安装不上&#xff0c;下载了1.92的版本一次就…
阅读更多...
FTP,SFTP,FTPS,SSL,TSL简介,区别,联系,使用场景说明

FTP,SFTP,FTPS,SSL,TSL简介,区别,联系,使用场景说明

文章目录 简介FTPFTPSSFTP加密场景选择FTPS还是SFTPFTP、SFTP、FTPS区别、联系和具体使用场景如何使用FTP、SFTP和FTPSSSLTLSSSL和TLS区别和联系&#xff0c;以及使用场景SSL和TLS技术上的区别一些问题隐式的TLS&#xff08;FTPS/SSL&#xff09;或者显式的TLS&#xff08;FTPS…
阅读更多...
[密码学]Base64编码

[密码学]Base64编码

一、相关指令 1. 查看工具版本号 base64 --version2. 对字符串加密 echo 字符串 | base64 echo "Hello base64" | base643. 对字符串解密 echo 字符串 |base64 -d echo "SGVsbG8gTGV0aWFuLVJTQQo" | base64 -d4. 对文件加密 base64 文件名 base64 tex…
阅读更多...
搭建交换机模拟环境及SSH连接，华为NSP软件入门使用教程

搭建交换机模拟环境及SSH连接，华为NSP软件入门使用教程

搭建交换机模拟环境及SSH连接&#xff0c;华为NSP软件入门使用教程 如果你是通过搜索搜到了这篇文章&#xff0c;那么一定是工作或者学习中需要用交换机&#xff0c;但是又没物理机测试学习&#xff0c;所以需要搭建本地的虚拟环境学习。 这篇文章是我进行交换机命令入门学习写…
阅读更多...
使用Flask快速搭建轻量级Web应用【第119篇—Flask】

使用Flask快速搭建轻量级Web应用【第119篇—Flask】

使用Flask快速搭建轻量级Web应用 在Web开发领域&#xff0c;选择适合项目需求的框架至关重要。Flask&#xff0c;一个轻量级的Python Web框架&#xff0c;以其简洁、灵活和易扩展的特性而备受开发者青睐。本文将介绍如何使用Flask迅速搭建一个轻量级的Web应用&#xff0c;并通过…
阅读更多...
js导出的excel文件无法打开/打开乱码，excel无法打开xxx.xlsx因为文件格式或文件扩展无效

js导出的excel文件无法打开/打开乱码，excel无法打开xxx.xlsx因为文件格式或文件扩展无效

excel无法打开xxx.xlsx因为文件格式或文件扩展无效 使用 a 标签导出这里就不细说了&#xff0c;直接说上述问题解决方案 在调用导出接口的时候加上两个参数 responseType: “blob” responseEncoding: “utf8” export function test(data) {return util({url: /test,method: …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023