前端 -- 基础 表单标签 - 表单元素 < Select > < textarea >

news2024/5/18 17:38:52

在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。

在之前,我们就讲过 表单元素 分了 三类来讲 :

1  input  输入表单元素 

2  select  下拉表单元素 

3 textarea  文本域元素  

input 表单元素 我们讲完了,接着我们就讲 select 下拉 和 textarea 文本域 两个元素 

< Select >   表单元素 

使用场景  : 

                在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,

                就可以使用  < Select > 标签控件定义 下拉列表   

                

                这就是 下拉表单的示例。 

语法规范  : 

<select>
    <option> 选项 1  </option>
    <option> 选项 2  </option>
    <option> 选项 3  </option>
    <option> 选项 4  </option>
    .......
</select>

           每一个 option 都是 下拉的选项 

===>>>

           

            注意 ,籍贯 这两个字的位置,以及最终效果时的位置;

               从中理解  < select > 下拉表单元素,只是针对 选项,选项前面的内容是不包括的;

               而 “籍贯” 的作用是解释 后面 下拉选项的内容的~!!! 

               所以,通过 位置 的对比,去理解 诸如 " 籍贯 ” 作用时,该如何编写~!! 

           #  < select > 是表单元素,所以,理应包含在 <form> 里面 ~!! 

          

          ===>>>

          

            

      : 

                #     <select> 中 至少包含一对 < option > 

                #     在 <option> 中 定义 selected  =  " selected "  时,当前项即为 默认选中项 

                       就像上示 中的 陕西一样 ( 因为在编写时,陕西 是 第一个选项 ) 

                       如果,你要指定 哪一个选项为 默认选项的话 

                       ===>>>

                       

                      ===>>>

                     

                     这个时候, 北京 就是 默认选中 项 

< textarea >  文本域元素  : 

使用场景  :  

     #    当用户输入内容较多的情况下,我们就不能使用文本框表单了,改使用 文本域 

           < textarea > 标签就是用于定义 多行文本输入的控件 

               

                上示就是,一个是 文本框,只能写一行内容,一个是文本域,可以写好多内容。

                使用多行文本输入控件,可以输入更多的文字,该控件常见于 留言板,评论等 

                

语法规范

<textarea  row="3   cols="20" >

    文本内容 

</textarea> 

 上示中的  文本内容 就是  示例页面中 会默认显示的内容, 就是页面一显示就直接在 文本域 中显

 示出来的内容 

===>>>

        

       ===>>>

        

      可以看到,页面直接显示出的内容,就是在 编写时的内容,如果不要这种默认效果,那就不

         写任何东西即可; 

     #  还可以看到的是,前面有空白内容,空白后才是我们的内容, 这和 编写 有关系 

         ===>>>

         

         前面紧挨着 标签,那就不会有空白

         

         

         可以看到,我们的 文本域 怎么都看着好小,这个是可以通过 属性 去改变的 

         ===>>>

               cols =   "  每行中的 字符数 "   

               rows =  "  显示的行数 "  

         ===>>>  

             

             

              这样便,可以通过属性 去改变 

     需要强调的是 ,我们在实际开发中 不会使用 上示的两个 属性, 都是通过 CSS 来改变大小 

     所以,我们压根就不用记 上示的两个 属性,了解即可       

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

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

相关文章

AGI要闻:斯坦福李飞飞首次创业,瞄准“空间智能”;OpenAI下周发布搜索产品挑战谷歌;新的开源 AI 眼镜来了|钛媒体AGI | 最新快讯

多方消息证实&#xff0c;OpenAI将会在北京时间5月10日&#xff08;周五&#xff09;凌晨2点公布搜索引擎新产品消息。 斯坦福大学首位红杉讲席教授 李飞飞 通用人工智能&#xff08;AGI&#xff09;领域又公布了一系列重磅消息。 5月4日凌晨&#xff0c;据路透社&#xff0c…

宝塔怎么配置nginx

宝塔怎么配置nginx 1.找到nginx配置位置 2.修改nginx.conf文件 3.重启nginx

在视频中使用时间卷积和半监督训练进行三维人体姿态估计

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 摘要Abstract文献阅读&#xff1a;在视频中使用时间卷积和半监督训练进行三维人体姿态估计1、文献摘要2、提出方法2.1、时间扩张卷积模型2.2、半监督方法2.3、与传统…

Mac OS系统如何更新

用了好几年的Mac Book安装软件经常提示需要更高的系统版本&#xff0c;因此要升级系统版本&#xff0c;但是开始在系统设置里面找了一下没有找到升级的按钮&#xff0c;找了资料后才知道如何升级。有以下两种入口 一、App Store搜索MacOs&#xff0c;在出现的搜索结果中选择下载…

力扣例题(接雨水)

链接&#xff1a; . - 力扣&#xff08;LeetCode&#xff09; 题目描述&#xff1a; 思路&#xff1a; 判断一块地方是否可以接到雨水&#xff0c;只需要判断他是否有左右边界使他可以接到水 左右边界分别为此处左侧的最高点和右侧的最高点 同时此处可接雨水的高度为左右两…

离散数学之命题逻辑思维导图+大纲笔记(预习、期末复习,考研,)

大纲笔记&#xff1a; 命题逻辑的基本概念 命题与联结词 命题 命题是推理的基本单位 真命题&#xff0c;假命题 特征 陈述句 唯一的真值 是非真即假的陈述句 非命题 疑问句 祈使句 可真可假 悖论 模糊性 三个基本概念 复合命题 真值取决于原子命题的值和逻辑联结词 原子命题 逻…

微图乐 多种装B截图一键制作工具(仅供娱乐交流)

软件介绍 采用exe进程交互通信。全新UI界面&#xff0c;让界面更加清爽简约。支持zfb、VX、TX、Yin行、Dai款、游戏等图片生成&#xff0c;一键超清原图复制到剪辑板&#xff0c;分享给好友。适用于提高商家信誉度&#xff0c;产品销售额度。装逼娱乐&#xff0c;用微图乐。图…

14_Scala面向对象编程_属性

属性 1.类中属性声明 // 1.给Scala声明属性&#xff1b;var name :String "zhangsan"val age :Int 302.系统默认赋值 scala由于初始化变量必须赋值&#xff0c;为了解决此问题可以采用下划线赋值&#xff0c;表示系统默认赋值 , –但是此方法局限于变量&…

Vue ui 创建vue项目,详细使用攻略。

1.安装及启动 1.1 Vue ui 使用前提是全局安装vue.js 命令如下 npm install vue -g 1.2 安装过Vue.js 之后 随便在自己系统的一个地方打开命令面板 1.3 使用命令启动vue ui面板创建项目 vue ui 如图运行后显示这种就是启动成功&#xff0c;成功之后会弹出页面或者直接访问你的…

【业务场景】京东实际场景,频繁GC引起的CPU飙高问题的解决

目录 1.业务介绍 2.判断任务类型 3.CPU飙高的原因 1.业务介绍 本文的业务场景是京东零售线公开的一篇文章&#xff0c;文章内容详细介绍了京东零售线如何将广告相关的定时任务从半小时优化到秒级的&#xff0c;原文链接&#xff1a; 半小时到秒级&#xff0c;京东零售定时…

Pandas标签库

目录 1.创建对象 1.一维对象 1.字典创建法 2.数组创建法 2.二维对象 1.字典创建法 2.数组创建法 2.对象的索引 1.一维对象的索引 1.查询 2.切片 2.二维对象的索引 1.访问 2.修改 3.对象的变形 1.对象的转置 2.上下翻转和左右翻转 3.对象的重塑 4.一维对象的合…

使用Jellyfin创建媒体库

目录 前言 1.介绍Jellyfin 2.安装 3.设置时注意点 4.效果 5.内存占用 前言 分为客户端和服务器端&#xff0c;这里讲的是服务器端的安装 1.介绍Jellyfin Jellyfin 是一个免费开源的媒体服务器软件&#xff0c;它允许您管理和播放您的媒体文件。这些媒体文件可以包括电…

Vue3 + Vite + TypeScript + Element-Plus创建管理系统项目

官方文档 Vue3官网 Vite官方中文文档 创建项目 使用npm命令创建项目&#xff1a; npm create vitelatest输入项目名称&#xff1a; ? Project name:项目名选择vue&#xff1a; ? Select a framework: - Use arrow-keys. Return to submit.Vanilla > VueReactPrea…

AST原理(反混淆)

一、AST原理 jscode var a "\u0068\u0065\u006c\u006c\u006f\u002c\u0041\u0053\u0054";在上述代码中&#xff0c;a 是一个变量&#xff0c;它被赋值为一个由 Unicode 转义序列组成的字符串。Unicode 转义序列在 JavaScript 中以 \u 开头&#xff0c;后跟四个十六进…

【Linux】 OpenSSH_7.4p1 升级到 OpenSSH_9.6p1(亲测无问题,建议收藏)

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;CSDN博客专家   &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01…

【linuxC语言】vfork、wait与waitpid函数

文章目录 前言一、函数使用1.1 vfork1.2 wait1.3 waitpid 二、示例代码总结 前言 在Linux系统编程中&#xff0c;vfork()、wait() 和 waitpid() 函数是处理进程管理和控制流的重要工具。这些函数允许我们创建新进程、等待子进程结束并获取其退出状态&#xff0c;从而实现进程间…

【CAP探索者指南】掌握分布式世界的三角平衡术,一致性、可用性、分区容错性大揭秘!

关注微信公众号 “程序员小胖” 每日技术干货&#xff0c;第一时间送达&#xff01; 引言 在现代的微服务架构中&#xff0c;系统被拆分成了许多小型服务&#xff0c;每个服务可能有自己的数据库。这种架构带来了灵活性和可扩展性&#xff0c;但也引入了新的挑战&#xff0c;…

高质量数据至关重要:phi-1.5论文笔记

导语 phi-系列模型是微软研究团队推出的轻量级人工智能模型&#xff0c;旨在实现“小而精”的目标&#xff0c;能够实现在低功耗设备上例如智能手机和平板电脑上部署运行。截止目前&#xff0c;已经发布到了phi-3模型&#xff0c;本系列博客将沿着最初的phi-1到phi-1.5&#x…

深入浅出 BERT

Transformer 用于学习句子中的长距离依赖关系&#xff0c;同时执行序列到序列的建模。 它通过解决可变长度输入、并行化、梯度消失或爆炸、数据规模巨大等问题&#xff0c;比其他模型表现更好。使用的注意力机制是神经架构的一部分&#xff0c;使其能够动态突出显示输入数据的…

功能测试_分类_用例_方法

总结 测试分类 按阶段分类 是否查看源代码分类 是否运行分类 是否自动化 其他分类 软件质量模型 开发模型-瀑布模型 测试过程模型 v w 测试用例八大要素 用例编号 用例标题 …