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.mfbz.cn/a/450938.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

国内可用免费AI工具集

国内可用免费AI工具集

1、Kimi Chat 由月之暗面科技有限公司&#xff08;Moonshot AI&#xff09;开发的人工智能助手。擅长中英文对话&#xff0c;能够提供安全、有帮助且准确的回答。它的能力包括阅读和理解用户上传的文件&#xff0c;访问互联网内容&#xff0c;以及结合搜索结果来回答问题。比如…
阅读更多...
【C#】WPF获取屏幕分辨率

【C#】WPF获取屏幕分辨率

SystemParameters提供的接口&#xff0c;其实是获取渲染过程中的实际高宽&#xff0c;是受系统DPI设置的影响。 以 1920 * 1080 和 125% DPI为例&#xff1a; 分辨率高度&#xff1a;1080&#xff0c;实际获取的高度为&#xff1a;864。 分辨率宽度&#xff1a;1920&#xff…
阅读更多...
高项-项目整合管理

高项-项目整合管理

项目整合管理的目标 资源分配平衡竞争性需求研究各种备选方法裁剪过程以实现项目目标管理各个项目管理知识域之间的依赖关系 项目整合管理的过程 制定项目章程制定项目管理计划指导与管理项目工作管理项目知识监控项目工作实施整体变更控制结束项目或阶段 七个过程和五大过…
阅读更多...
【1688运营】如何拆解竞争对手店铺和单品数据？

【1688运营】如何拆解竞争对手店铺和单品数据？

关注竞争对手数据是1688运营中不可或缺的一环&#xff0c;它有助于企业更好地了解市场环境、发现市场机会、学习成功经验、预测市场变化以及提升竞争力。以下是一些建议&#xff0c;帮助你全面、深入地分析竞争对手的店铺和单品数据&#xff1a; 1、监控店铺数据 可以通过店雷…
阅读更多...
求第n个斐波那契数--c语言

求第n个斐波那契数--c语言

用递归的方法&#xff1a; //用递归求第n个斐波那契数 int fib(int n){if(n<2){return 1;}else{return fib(n-1)fib(n-2); } } #include<stdio.h> int main(){int n0;printf("请输入n的值&#xff1a;");scanf("%d",&n);int result fib(n);…
阅读更多...
未来艺术展览新趋势——3D线上画展如何创新展示？

未来艺术展览新趋势——3D线上画展如何创新展示？

一、艺术展示的数字化转型 随着科技的不断进步&#xff0c;3D线上画展作为艺术展示的新趋势&#xff0c;正逐渐改变着人们欣赏和购买艺术作品的方式。对于画家而言&#xff0c;3D线上画展不仅提供了一个全新的平台来展示他们的作品&#xff0c;还开辟了销售渠道&#xff0c;扩大…
阅读更多...
面向对象技术（第一周）

面向对象技术（第一周）

目录 ⚽前言 &#x1f3d0;面向对象思想 起源 现实 编程联系 面向对象思想总结 &#x1f3c0;面向对象开发方法 开发中的名词&#xff1a; 名词间的关系 名词具体阐释 一、对象 二、消息和方法&#xff1a; 前言 本文所有知识点和内容均来自山东大学潘丽老师及山东…
阅读更多...
京津冀协同发展：北京·光子1号金融算力中心——智能科技新高地

京津冀协同发展：北京·光子1号金融算力中心——智能科技新高地

京津冀协同发展是党中央在新的历史条件下提出的一项重大国家战略&#xff0c;对于全面推进“五位一体”总体布局&#xff0c;以中国式现代化全面推进强国建设、民族复兴伟业&#xff0c;具有重大现实意义和深远历史意义。随着京津冀协同发展战略的深入推进&#xff0c;区域一体…
阅读更多...
unique_ptr使用说明

unique_ptr使用说明

背景 指针问题一直是一个比较麻烦的事情&#xff0c;比如很多人说要用智能指针完全替换掉裸指针&#xff0c;有人说要用unique_ptr, 有人建议shared_ptr,可是实际看各种经典框架&#xff0c;发现一个框架什么指针都有&#xff0c;使用的方法也是无法八门&#xff0c;这里简单说…
阅读更多...
可访问性使命：Facebook构建无障碍社交空间

可访问性使命：Facebook构建无障碍社交空间

在当今数字化时代&#xff0c;社交媒体已成为人们日常生活的重要组成部分&#xff0c;而Facebook作为全球最大的社交平台之一&#xff0c;其使命不仅在于连接世界&#xff0c;还在于构建一个无障碍的社交空间&#xff0c;让每个人都能参与其中。本文将深入探讨Facebook在可访问…
阅读更多...
几个增强诊断详解

几个增强诊断详解

几个增强诊断 基于CAN线 ISO15031-5是排放相关的应用层协议&#xff0c;它不关心我们使用K线还是CAN线&#xff0c;主要用于监控车辆基本参数&#xff0c;例如监控里程、车速&#xff1b;用于监控排放相关的参数&#xff0c;比如各种尾气的含量&#xff0c;氧含量等等&#xf…
阅读更多...
红队笔记7--Web机器为Linuxdocker逃逸

红队笔记7--Web机器为Linuxdocker逃逸

其实&#xff0c;不知道大家有没有想过&#xff0c;我们之前练习的都是web机器是windows的版本&#xff0c;但是其实&#xff0c;在现实生活中&#xff0c;服务器一般都是Linux的版本&#xff0c;根本不可能用到windows的版本 那么如果是Linux的话&#xff0c;我们就有很多的困…
阅读更多...
【正点原子STM32探索者】CubeMX+Keil开发环境搭建

【正点原子STM32探索者】CubeMX+Keil开发环境搭建

文章目录 一、简单开箱二、资料下载三、环境搭建3.1 安装Keil MDK3.2 激活Keil MDK3.3 安装STM32CubeMX3.4 安装STM32F4系列MCU的Keil支持包 四、GPIO点灯4.1 查阅开发板原理图4.2 创建STM32CubeMX项目4.3 配置系统时钟和引脚功能4.4 生成Keil项目4.5 打开Keil项目4.6 编译Keil…
阅读更多...
K8s的kubeadm方式部署集群实例

K8s的kubeadm方式部署集群实例

目录 一、准备环境 主机清单 修改主机名 设置防火墙、selinux状态 主机名解析 固定ip 重启网卡 同步时间 关闭swap分区 二、获取镜像 三、安装docker 四、配置kubeadm源 安装依赖包及常用插件 1.配置kubeadm源&#xff0c;安装对应版本 2.加载相关ipvs模块 3.配…
阅读更多...
Day17：开发流程、开发社区首页、项目的调试、版本控制

Day17：开发流程、开发社区首页、项目的调试、版本控制

开发流程 一次请求过程 先开发DAO&#xff0c;再开发service&#xff0c;再开发controller 开发社区首页的分布实现 显示前10个帖子 创建帖子数据表 CREATE TABLE discuss_post (id int NOT NULL AUTO_INCREMENT,user_id varchar(45) DEFAULT NULL,title varchar(100) DEF…
阅读更多...
使用Java的等待/通知机制实现一个简单的阻塞队列

使用Java的等待/通知机制实现一个简单的阻塞队列

Java的等待/通知机制 Java的等待通知机制是多线程间进行通信的一种方式。 有三个重要的方法&#xff1a;wait()&#xff0c;notify() 和以及notifyAll() wait()&#xff1a;该方法用于让当前线程&#xff08;即调用该方法的线程&#xff09;进入等待状态并且释放掉该对象上的…
阅读更多...
SpringBoot中配置nacos

SpringBoot中配置nacos

SpringBoot中配置nacos 在SpringBoot中使用nacos一定要注意name&#xff0c;使用openfeign特别要注意这个点。 spring:application:name: item-service需要的依赖包 config需要引入的包 <dependency><groupId>com.alibaba.cloud</groupId><artifactId…
阅读更多...
搜索引擎:引擎霸屏推广的未来趋势解读-华媒舍

搜索引擎:引擎霸屏推广的未来趋势解读-华媒舍

1. 引擎霸屏推广 引擎霸屏推广是一种广告推广策略&#xff0c;通过借助搜索引擎的广告服务&#xff0c;让广告展示在用户搜索关键词时的首页位置&#xff0c;以吸引潜在客户点击进入宣传页面。这种推广方式具有精准定位和较高的曝光率&#xff0c;对于产品推广和品牌塑造非常有…
阅读更多...
IT驻场外包能提供哪些类型的服务？

IT驻场外包能提供哪些类型的服务？

随着信息技术的飞速发展&#xff0c;IT驻场外包作为一种高效的企业服务模式&#xff0c;正逐渐成为企业提升效率和削减成本的首选。这种外包形式将专业的IT人员直接派驻到客户现场&#xff0c;为企业提供全方位的技术支持和服务。本文将深入研究IT驻场外包所能提供的多种服务类…
阅读更多...
51单片机基础篇系列-超声波测距

51单片机基础篇系列-超声波测距

&#x1f308;个人主页&#xff1a;会编辑的果子君 &#x1f4ab;个人格言:“成为自己未来的主人~” HC-SR04产品特点 典型工作用电压&#xff1a;5V 超小静态工作电流&#xff1a;小于2mA 感应角度&#xff1a;不大于15度 探测距离&#xff1a;2cm-400cm 高精度&#…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站