当前位置： 首页 > news >正文

【HTML】HTML 表单 ④ ( textarea 文本域控件 | select 下拉列表控件 )

news 2026/2/10 20:56:54

文章目录

  • 一、textarea 文本域控件
  • 二、select 下拉列表控件





一、textarea 文本域控件


textarea 文本域 控件 是 多行文本输入框 , 标签语法格式如下 :

<textarea cols="每行文字字符数" rows="文本行数">多行文本内容
</textarea>

实际开发中 并不使用 cols 和 rows 属性 , 直接使用 CSS 设置宽度和高度 ;


多行文本域 与 单行文本框 的区别 :

<input type="text" value="请输入账号"/>
  • input 文本框表单控件 是 单标签 , textarea 文本域控件 是 双标签 ;
  • 单行文本框 常用于 用户名 , 密码 , 验证码 等输入 ;
  • 文本域 常用于 用户回复 , 回帖 , 留言板 等输入 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en"><head>    <meta charset="UTF-8" /> <title>网页标题</title><base target="_blank"/></head><body>网友回复 :<br /><textarea cols="50" rows="5">
多行文本
内容</textarea></body>
</html>

显示效果 :
在这里插入图片描述





二、select 下拉列表控件


使用 select 下拉列表 控件 提供多个选择项 供用户选择 , 比 单选按钮 要节省更多的空间 ;


select 下拉列表 控件 语法 : 在 <select> 标签中 , 不能为空 , 至少要有一个 option 选项 ;

<select><option selected="selected">下拉选项1</option><option>下拉选项2</option><option>下拉选项3</option>
</select>

如果 option 标签中添加了 selected="selected" 属性 , 该选项是默认选项 ;


代码示例 :

<!DOCTYPE html> 
<html lang="en"><head>    <meta charset="UTF-8" /> <title>网页标题</title><base target="_blank"/></head><body>网友回复 :<br /><select><option>--请选择选项--</option><option selected="selected">下拉选项1</option><option>下拉选项2</option><option>下拉选项3</option></select></body>
</html>

展示效果 :
在这里插入图片描述

相关文章：

【HTML】HTML 表单 ④ ( textarea 文本域控件 | select 下拉列表控件 )

文章目录一、textarea 文本域控件二、select 下拉列表控件一、textarea 文本域控件 textarea 文本域 控件 是 多行文本输入框 , 标签语法格式如下 : <textarea cols"每行文字字符数" rows"文本行数">多行文本内容 </textarea>实际开发中 并不…...

编程日记 2023/2/23 4:01:58

MySQL 操作 JSON 数据类型

MySQL 从 v5.7.8 开始支持 JSON 数据类型。 JSON 数据类型和传统数据类型的操作还是有很大的差别&#xff0c;需要单独学习掌握。好在 JSON 数据类型的学习成本不算太高&#xff0c;只是在 SQL 语句中扩展了 JSON 函数&#xff0c;操作 JSON 数据类型主要是对函数的学习。 新…...

编程日记 2023/2/23 4:00:49

关于vue3生命周期的使用、了解以及用途（详细版）

生命周期目录前言组合式写法没有 beforeCreate / created 生命周期&#xff0c;并且组合式写生命周期用哪个先引哪个beforeCreatecreatedbeforeMount/onBeforeMountmounted/onMountedbeforeUpdate/onBeforeUpdateupdated/onUpdatedbeforeUnmount/onBeforeUnmountunmounted/onUn…...

编程日记 2023/2/23 3:59:40

2月，真的不要跳槽。

新年已经过去&#xff0c;马上就到金三银四跳槽季了&#xff0c;一些不满现状&#xff0c;被外界的“高薪”“好福利”吸引的人&#xff0c;一般就在这时候毅然决然地跳槽了。 在此展示一套学习笔记 / 面试手册&#xff0c;年后跳槽的朋友可以好好刷一刷&#xff0c;还是挺有必…...

编程日记 2023/2/23 3:58:33

Vulnhub靶场----4、DC-4

文章目录一、环境搭建二、渗透流程三、思路总结一、环境搭建 DC-4下载地址&#xff1a;https://download.vulnhub.com/dc/DC-4.zip kali&#xff1a;192.168.144.148 DC-4&#xff1a;192.168.144.152 二、渗透流程 端口扫描&#xff1a;nmap -T5 -p- -sV -sT -A 192.168.144.1…...

编程日记 2023/2/23 3:57:24

51单片机学习笔记_12 LCD1602 原理及其模块化代码

LCD1602 liquid crystal display 液晶显示屏&#xff0c;一种字符型液晶显示模块&#xff0c;可以显示 16*2 个字符&#xff0c;每个字符是 5*7 点阵。 P0 P2 会和数码管、LED 一定程度上冲突。 地。 Vcc。 调对比度的。 RS&#xff1a;数据指令端。1代表 DB 是数据&#x…...

编程日记 2023/2/23 3:56:15

科技 “新贵”ChatGPT 缘何 “昙花一现” ，仅低代码风靡至今

恍惚之间&#xff0c;ChatGPT红遍全网&#xff0c;元宇宙沉入深海…… 在科技圈&#xff0c;见证了太多“昙花一现”&#xff0c;“新贵” ChatGPT 的爆火几乎复制了元宇宙的路径&#xff0c;它会步元宇宙的后尘&#xff0c;成为下一个沉入深海的工具吗&#xff1f; 不可否认的…...

编程日记 2023/2/23 3:55:05

redis基本入门| 怎么安装redis?什么的是redis?怎么使用？

目录 一、Redis下载与安装 二、基本概念 1.什么是Redis? 2.Redis端口多少&#xff1f; 3.Redis是单线程还是多线程&#xff1f; 4.Redis为什么单线程还这么快&#xff1f; 三、Redis的基本操作 四、Redis的五个基本类型 1.Redis-key 2.字符串 string 3.列表 list …...

编程日记 2023/2/23 3:53:57

kubernetes traefik ingress 安装部署以及使用和注意点

1、简介 Traefik 是一款 open-source 边缘路由器&#xff0c;可让您轻松地发布服务. 它接收来自您的系统请求&#xff0c;并找出负责处理它们的后端服务组件。 traefik 与众不同在于它能够自动发现适合您服务的配置。 当 Traefik 检查您的基础设施时&#xff0c;它会发现相关信…...

编程日记 2023/2/23 3:52:43

电脑病毒已灭绝，是真的吗？

大家有没有这样一个疑问&#xff0c;觉得自己的电脑好像很久没有电脑病毒了&#xff1f;之前大名鼎鼎的蠕虫2000&#xff0c;熊猫烧香都变得不那么常见了。到底是电脑因为自身优化和杀毒软件的防护导致病毒变少了&#xff0c;还是本身电脑病毒变少了呢&#xff1f;&#xff08;…...

编程日记 2023/2/23 3:51:33

基于RK3399+Linux QT地面测试台多参数记录仪测试平台软件设计(二）

rk3399 是由本土芯片厂商瑞芯微&#xff08;Rockchip&#xff09;研发的高性能、低功耗“中国芯”。在 2016 年 4 月&#xff0c;rk3399 首次在香港举行的电子展上亮相。芯片使用六核大 LITTLE 处理器&#xff1a; 包括四核的 Cortex-A53 和双核的 Cortex-A72&#xff0c;主频可…...

编程日记 2023/2/23 3:50:25

追梦之旅【数据结构篇】——详解C语言实现动态版顺序栈

详解C语言动态实现顺序栈~&#x1f60e;前言&#x1f64c;预备小知识&#x1f49e;栈的概念及结构整体实现内容分析&#x1f49e;1.头文件编码实现&#x1f64c;2.功能文件编码实现&#x1f64c;3.测试文件的编写&#xff1a;&#x1f64c;总结撒花&#x1f49e;&#x1f60e;博…...

编程日记 2023/2/23 3:49:16

Ubuntu 使用Nohup 部署/启动/关闭程序

目录 一、什么是nohup&#xff1f; 二、nohup能做什么&#xff1f; 三、nohup如何使用&#xff1f; 四、怎么查看/关闭使用nohup运行的程序&#xff1f; 命令 实例 一、什么是nohup&#xff1f; nohup 命令运行由 Command参数和任何相关的 Arg参数指定的命令&#xff0c…...

编程日记 2023/2/23 3:48:03

Spring 用到了哪些设计模式

关于设计模式&#xff0c;如果使用得当&#xff0c;将会使我们的代码更加简洁&#xff0c;并且更具扩展性。本文主要讲解Spring中如何使用策略模式&#xff0c;工厂方法模式以及Builder模式。1. 策略模式关于策略模式的使用方式&#xff0c;在Spring中其实比较简单&#xff0c;…...

编程日记 2023/2/23 3:46:56

Linux上基于PID找到对应的进程名以及所在目录

Linux上基于PID找到对应的进程名以及所在目录前言找到进程的pid通过top命令查看通过 ps -ef |grep nignx进行查看通过端口号进行查看查看nginx进程目录前言 在一台新接触的服务器&#xff0c;却不熟悉搭建所在目录的时候&#xff0c;这时候就就可以通过ps查找进程&#xff0c;并…...

编程日记 2023/2/23 3:45:47

jvm知识点与面试题

jvm 1. 定义&#xff1a;Java虚拟机&#xff08;Java virtual machine&#xff09;&#xff0c;一种能够运行Java字节码的虚拟机。 1.1. Java虚拟机包括一套字节码指令集、一组寄存器、一个栈、一个垃圾回收堆和一个存储方法域。 2. jvm基本结构&#xff1a; 2.1. 1 类加载…...

编程日记 2023/2/23 3:44:38

算法前缀和—Java版

前缀和概念 假设有数组 A[1,2,3,4,5,6,7] 为原数组&#xff0c;有数组 B作为A的前缀和数组&#xff0c;那么B[1,3,6,10,15,21,28]&#xff1b;可以发现B[i] A[0]....A[i]&#xff0c;即B[i]是数组A的前面i个数的总和。可以前缀和表示如下公式&#xff1a; B[i]∑j0iA[j]B[i]\s…...

编程日记 2023/2/23 3:43:30

拨开迷雾 看见vivo穿越周期的秘密

文|智能相对论作者|佘凯文任何一个行业都有周期性&#xff0c;就好像我们在做股票投资的时候&#xff0c;提到最多的就是周期规律&#xff0c;因为只有掌握规律才可以让我们赚到钱。所以不论是哪家公司都逃脱不了行业周期的宿命。行业寒冬方显强者本色就拿手机行业来说吧&#…...

编程日记 2023/2/23 3:42:21

浅谈常用的日志框架

文章目录1.为什么需要日志框架2.常见日志框架2.1.日志框架介绍2.2.市面上的日志框架3.Slf4j使用3.1.如何在系统中使用SLF4j3.2.可能存在的问题4.SpringBoot日志的默认配置5.SpringBoot指定日志文件6.切换日志框架1.为什么需要日志框架 通过日志的方式记录系统运行的过程或错误以…...

编程日记 2023/2/23 3:40:10

字节是真的难进，测开4面终上岸，压抑5个月，终于可以放声呐喊

这次字节的面试&#xff0c;给我的感触很深&#xff0c;意识到基础的重要性。一共经历了五轮面试&#xff1a;技术4面&#xff0b;HR面。 下面看正文 本人自动专业毕业&#xff0c;压抑了五个多月&#xff0c;终于鼓起勇气&#xff0c;去字节面试&#xff0c;下面是我的面试过…...

编程日记 2023/2/23 3:39:03

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2026/2/8 4:37:27

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2026/1/25 13:13:20

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2026/1/27 7:46:36

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2026/2/7 10:59:19

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2026/1/29 11:40:13

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2026/1/31 3:30:33

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2026/2/10 15:47:33

AI，如何重构理解、匹配与决策？

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

编程新知 2026/1/30 2:33:11

Python 实现 Web 静态服务器（HTTP 协议）

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

编程新知 2026/1/29 2:11:49

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

编程新知 2026/2/6 14:23:05