HTML 学习笔记(十一)表单

news2024/11/27 2:34:22

一、分块

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.coloradmin.cn/o/1511453.html

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

相关文章

Qt QDateTime类使用

Qt QDateTime类使用

一.Qt datetime 介绍 Qt中的QDateTime类是用于处理日期和时间的组合的类&#xff0c;它提供了丰富的功能来操作和格式化日期时间数据。以下是其主要特点和用法&#xff1a; 构造函数&#xff1a;QDateTime可以通过组合QDate&#xff08;日期&#xff09;和QTime&#xff08;时…
阅读更多...
C++感受2-逐字逐句，深入理解C++最小例程

C++感受2-逐字逐句，深入理解C++最小例程

以 “Hello World” 例程为载体、线索&#xff0c;在完成 “间接名字空间限定” 写法转换到“直接名字空间限定”的过程&#xff0c;同时掌握函数、主函数、函数调用、级联操作、声明、类型、int、字符串类型、头文件包含、行为数据、流输出操作符、标准输出流对象、标准库名字…
阅读更多...
LeetCode.2129. 将标题首字母大写

LeetCode.2129. 将标题首字母大写

&#x1f354;题目 2129. 将标题首字母大写 &#x1f35f;分析 这道题目描述的很清晰&#xff0c;我们只需要将给定的字符串按照空格划分成字符串数组 str&#xff0c;然后判断 str[i] 的长度如果 <2 &#xff0c;则将 str[i] 转为小写&#xff0c;如果 str[i] 的长度 &g…
阅读更多...
Python批量提取Word文档表格数据

Python批量提取Word文档表格数据

在大数据处理与信息抽取领域中&#xff0c;Word文档是各类机构和个人普遍采用的一种信息存储格式&#xff0c;其中包含了大量的结构化和半结构化数据&#xff0c;如各类报告、调查问卷结果、项目计划等。这些文档中的表格往往承载了关键的数据信息&#xff0c;如统计数据、项目…
阅读更多...
CSS 用 flex 布局绘制骰子

CSS 用 flex 布局绘制骰子

<!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>.box {height: 100px;width: 100px;border: 2px solid grey;border-radius: 10px;display: flex;justify-content: center; // 水平居中/* alig…
阅读更多...
new-easy（pwn)

new-easy（pwn)

1.进行查壳 栈保护&#xff0c;三个保护都开了 NX保护 NX保护在Windows中也被成为称为DEP&#xff0c;是通过现代操作系统的内存单元&#xff08;Memory Protect Unit &#xff0c;MPU&#xff09;机制对程序内存页的粒度进行权限设置&#xff0c;其基本规则为可写权限与可执…
阅读更多...
简述类与对象

简述类与对象

一、两者关系 类是Java语言中最重要的数据类型&#xff0c;用于创建具体实例&#xff08;对象&#xff09; 抽象出一类事物共有的属性和行为&#xff0c;即数据以及数据上的操作 类是对现实事物的模拟&#xff0c;包含属性&#xff08;成员变量&#xff09;和行为&#xff0…
阅读更多...
python读取大型csv文件，降低内存占用，提高程序处理速度

python读取大型csv文件，降低内存占用，提高程序处理速度

文章目录 简介读取前多少行读取属性列逐块读取整个文件总结参考资料 简介 遇到大型的csv文件时&#xff0c;pandas会把该文件全部加载进内存&#xff0c;从而导致程序运行速度变慢。 本文提供了批量读取csv文件、读取属性列的方法&#xff0c;减轻内存占用情况。 import pand…
阅读更多...
2024.3.12 C++

2024.3.12 C++

1.思维导图 2.自己封装一个矩形类(Rect)&#xff0c;拥有私有属性:宽度(width)、高度(height),定义公有成员函数: 初始化函数:void init(int w, int h)更改宽度的函数:set_w(int w)更改高度的函数:set_h(int h) 输出该矩形的周长和面积函数:void show() #include <iostream…
阅读更多...
python(ogr)处理geojson为本地shp文件

python(ogr)处理geojson为本地shp文件

前言 本次所利用的geojson数据来自https://geo.datav.aliyun.com/areas_v3/bound/410000_full.json &#xff0c;如果觉得下方代码看起来不方便&#xff0c;可以来GitHub上来看&#xff0c;在这上面还有一些辅助内容便于理解 GISpjd/GIS-union-Python (github.com)https://gi…
阅读更多...
【2024.03.12】定时执行专家 V7.2 发布 - TimingExecutor V7.2 Release

【2024.03.12】定时执行专家 V7.2 发布 - TimingExecutor V7.2 Release

目录 ▉ 软件介绍 ▉ 新版本 V7.2 下载地址 ▉ V7.2 新功能 ▼2024-03-12 V7.2 - 更新日志 ▉ V7.x 新UI设计 ▉ 软件介绍 《定时执行专家》是一款制作精良、功能强大、毫秒精度、专业级的定时任务执行软件。软件具有 25 种【任务类型】、12 种【触发器】触发方式&#x…
阅读更多...
Linux内核介绍and下载

Linux内核介绍and下载

Linux内核介绍and下载 介绍下载下载历史版本 我是将军我一直都在&#xff0c;。&#xff01; 介绍 ● Linux是c语言写成的 ● 符合POSIX标准 ● 作者是芬兰的Linus Torvalds ● 发展依赖于五个重要支柱: unix操作系统、minix操作系统、 GNU计划、POSIX标准和互联网 ● 2.6之后…
阅读更多...
WebSocket：实现客户端与服务器实时通信的技术

WebSocket：实现客户端与服务器实时通信的技术

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
CodeSys通过C函数接口调用Qt

CodeSys通过C函数接口调用Qt

文章目录 1.背景介绍2.修改makefile2.1.将编译器由c改成c2.2.使能opencv库2.3.使能Qt库 3.在代码中使用Qt库函数 1.背景介绍 建议先查看之前的文章【CodeSys中调用C语言写的动态库】&#xff0c;了解如何创建一个能够被codesys调用的动态库。 假如想要在函数中使用Qt或者第三方…
阅读更多...
Vue3全家桶 - Vue3 - 【8】模板引用【ref】（访问模板引用 + v-for中的模板引用 + 组件上的ref）

Vue3全家桶 - Vue3 - 【8】模板引用【ref】（访问模板引用 + v-for中的模板引用 + 组件上的ref）

模板引用【ref】 Vue3官网-模板引用&#xff1b;如果我们需要直接访问组件中的底层DOM元素&#xff0c;可使用vue提供特殊的ref属性来访问&#xff1b; 一、 访问模板引用 在视图元素上采用ref属性来设置需要访问的DOM元素&#xff1a; 该 ref 属性可采用 字符串 值的执行设…
阅读更多...
【基于langchain + streamlit 完整的与文档对话RAG】

【基于langchain + streamlit 完整的与文档对话RAG】

本地部署文档问答webdemo 支持 pdf支持 txt支持 doc/docx支持 源文档索引 你的点赞和收藏是我持续分享优质内容的动力哦~ 废话不多说直接看效果 准备 首先创建一个新环境&#xff08;选择性&#xff09; conda create -n chatwithdocs python3.11 conda activate chatwith…
阅读更多...
Promise其实也不难

Promise其实也不难

难点图解&#xff1a;then&#xff08;&#xff09;方法 ES6学习网站&#xff1a;ES6 入门教程 解决&#xff1a;回调地狱&#xff08;回调函数中嵌套回调&#xff09; 两个特点&#xff1a; &#xff08;1&#xff09;对象的状态不受外界影响。Promise对象代表一个异步操作&…
阅读更多...
Linux常见指令总结

Linux常见指令总结

ls&#xff1a;显示当前目录下文件列表 常用的命令行参数&#xff1a; -l 显示更多的文件属性 -a 显示所有的文件/目录&#xff08;包括隐藏的&#xff09; -d 只显示目录 ps&#xff1a;参数可以叠加使用。 例如&#xff1a;ls -la 显示所有文件…
阅读更多...
力扣刷题Days16（js）-67二进制求和

力扣刷题Days16（js）-67二进制求和

目录 1,题目 2&#xff0c;代码 2.1转换进制数 2.2模拟加法 3&#xff0c;学习与总结 Math.floor() 模拟加法思路回顾 重点复习巩固 模拟加法的思路和学习位运算&#xff1b; 今天没精力了&#xff0c;先休息 1,题目 给你两个二进制字符串 a 和 b &#xff0c;以二进制…
阅读更多...
2m高分辨率土地利用分类矢量数据/植被类型分布数据

2m高分辨率土地利用分类矢量数据/植被类型分布数据

土地利用数据是在根据影像光谱特征&#xff0c;结合野外实测资料&#xff0c;同时参照有关地理图件&#xff0c;对地物的几何形状&#xff0c;颜色特征、纹理特征和空间分布情况进行分析&#xff0c;建立统一解译标志的基础之上&#xff0c;依据多源卫星遥感信息&#xff0c;结…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023