html中的form表单以及相关控件input、文本域、下拉select等等的详细解释 ,点赞加关注持续更新~

文章目录

    • 表单
      • 创建表单form
      • input 标签
      • input标签的value属性
      • 设置input标签格式
      • 单选框
      • 多选框
      • 上传文件
      • 下拉菜单
      • 文本域
      • 设置文本域格式
      • label 标签
      • 按钮

表单

作用:收集用户信息。

使用场景:

  • 登录页面
  • 注册页面
  • 搜索区域

创建表单form

 <form action="./target.html"></form>

action属性:指向服务器地址

input 标签

input 标签 type 属性值不同,则功能不同。

<input type="..." >

在这里插入图片描述

input的属性type="text/password"时的属性补充

autocomplete="off" 关闭自动补全

readonly 设置为只读,不能修改

disabled 设置为禁用

autofocus 自动获取焦点

placeholder 提示内容

maxlength=“数字” 最长字符

input标签的value属性

  • input 标签的 value 属性的作用是由 input 标签的 type 属性的值决定的

  • type 的取值为 buttonresetsubmit 中的其中一个时,此时 value 属性的值表示的是按钮上显示的文本

    在这里插入图片描述

  • type 的取值为 textpasswordhidden 中的其中一个时,此时 value 属性的值表示的是输入框中显示的初始值,此初始值可以更改,并且在提交表单时,value 属性的值会发送给服务器(既是初始值,也是提交给服务器的值)

    在这里插入图片描述

  • type 的取值为 checkboxradio 中的其中一个时,此时 value 属性的值表示的是提交给服务器的值

    type="checkbox"时,其 value 属性的值与单选框、复选框是否勾选有关。呈勾选状态时提交给服务器的数据值为true,否则为false,默认值为 false

  • type 的取值为 image 时,不能使用value属性,点击它提交表单后,会将用户的点击位置相对于图像左上角的 x 坐标和 y 坐标提交给服务器

    type="image" 定义图像形式的提交按钮,可以通过调整inputwidthheight来改变图片的大小。必须把 src 属性 和 alt 属性 <input type="image"> 结合使用(alt 属性表示图片未正常显示时,用于替换图片的提示;如果不写这个属性,当图片未正常显示时,会默认显示提交这两个字)

    <input type="text"  placeholder="请输入">
    <input type="image"  src="./d.jpeg" title="submit"  alt="提交" >
    

    在这里插入图片描述

设置input标签格式

input 标签占位文本

占位文本:提示信息,文本框和密码框都可以使用。

<input type="..." placeholder="提示信息">

修改input输入框提示文字的样式

input::placeholder {font-size: 5px;color: rgb(190, 190, 190);
}

去除input获取焦点时的边框

 outline: none;

修改input输入框提示文字

input{
text-indent: 5px; /*提示文字距离左边框的距离*/
font-size: 12px; /*提示文字大小*/
}

单选框

常用属性
在这里插入图片描述

<input type="radio" name="gender" checked><input type="radio" name="gender">

在这里插入图片描述

提示:name 属性值自定义。

多选框

多选框也叫复选框,默认选中:checked。

<input type="checkbox" checked> 我爱敲代码

上传文件

默认情况下,文件上传表单控件只能上传一个文件,添加 multiple 属性可以实现文件多选功能。

<input type="file">  <!--上传单个文件-->
<input type="file" multiple>  <!--上传多个文件-->

下拉菜单

在这里插入图片描述

标签:select 嵌套 optionselect 是下拉菜单整体,option是下拉菜单的每一项。

<select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option><option selected>武汉</option>
</select>

value 属性是 <option> 元素的属性,它指定了当选项被选中时发送到服务器的值。

在这个例子中,如果用户选择“苹果”,value 的值就会是 “apple”。

<select name="fruits">  <option value="apple">苹果</option>  <option value="banana">香蕉</option>  <option value="cherry">樱桃</option>  
</select>

默认显示第一项,selected 属性实现默认选中功能。

文本域

作用:多行输入文本的表单控件。

在这里插入图片描述

<textarea>文本域默认初始文字</textarea>

设置文本域格式

设置输入文字格式

textarea{resize: none;  /* 禁用文本域大小的缩放 */width: 200px;  /*设置文本域宽度*/height: 50px;  /*设置文本域高度*/color: red;  /*输入文字的颜色*/font-size: 15px;  /*输入文字的大小*/outline: none;  /*去除获得焦点时出现的边框*/border: none;  /*去除文本域默认边框*/}

设置提示文字格式(与修改input提示文字格式的方法基本相同)

textarea::placeholder {font-size: 25px; /*设置提示文字的大小,如果没有设置提示文字的大小,默认提示文字的大小和输入文字的大小相同*/color:green;  /*设置提示文字的颜色*/text-indent: 20px; /*提示文字距离左边框的距离*/
}

在这里插入图片描述

注意点:实际开发中,使用 CSS 设置 文本域的尺寸,且一般禁用右下角的拖拽功能

label 标签

作用:网页中,某个标签的说明文本。

在这里插入图片描述

经验:用 label 标签绑定文字和表单控件的关系,增大表单控件的点击范围。

在这里插入图片描述

  • 写法一
    • label 标签只包裹内容,不包裹表单控件
    • 设置 label 标签的 for 属性值 和表单控件的 id 属性值相同
<input type="radio" id="man">
<label for="man"></label>
  • 写法二:使用 label 标签包裹文字和表单控件,不需要属性
<label><input type="radio"></label>

提示:支持 label 标签增大点击范围的表单控件:文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

按钮

<button type="">按钮</button>

在这里插入图片描述

<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">用户名:<input type="text"><br><br>密码:<input type="password"><br><br><!-- 如果省略 type 属性,默认值为submit,功能是提交 --><button type="submit">提交</button><button type="reset">重置</button><button type="button">普通按钮</button>
</form>

提示:按钮需配合 form 标签(表单区域)才能实现对应的功能。

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

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

相关文章

在SpringBoot中重试调用第三方API

1引言 在实际的应用中&#xff0c;我们经常需要调用第三方API来获取数据或执行某些操作。然而&#xff0c;由于网络不稳定、第三方服务异常等原因&#xff0c;API调用可能会失败。为了提高系统的稳定性和可靠性&#xff0c;我们通常会考虑实现重试机制。 2重试机制的必要性 …

SpringCloudAlibaba之Gateway

1、简介 网关是系统唯一对外的入口&#xff0c;介于客户端与服务器端之间&#xff0c;用于对请求进行鉴权、限流、路由、监控等功能。 2、Gateway主要功能 2.1、route 路由 路由是网关的最基本组成&#xff0c;由一个路由 id、一个目标地址 url&#xff0c;一组断言工厂及一…

静态S5的常见问题与解决方法

静态S5作为一款功能强大的数据分析工具&#xff0c;被广泛应用于各个行业。然而&#xff0c;在使用过程中&#xff0c;用户可能会遇到一些常见问题。本文将针对这些问题提供相应的解决方法&#xff0c;帮助用户更好地使用静态S5。 一、数据导入问题 在导入数据时&#xff0c;…

RocketMQ源码 创建Topic流程源码分析

前言 MQAdminImpl MQ管理组件提供了大量对mq进行管理的工具&#xff0c;其中一个就是创建Topic。它内部实现是通过 mqClient工具从 NameServer拉取当前 Topic对应的路由元数据信息&#xff0c;解析遍历和当前topic有关的 broker高可用分组集合&#xff0c;找到分组中的 master…

老胡的周刊(第122期)

老胡的信息周刊[1]&#xff0c;记录这周我看到的有价值的信息&#xff0c;主要针对计算机领域&#xff0c;内容主题极大程度被我个人喜好主导。这个项目核心目的在于记录让自己有印象的信息做一个留存以及共享。 &#x1f3af; 项目 movie-web[2] 开源可自部署的简约在线电影搜…

JAVA中对登录进行IP限制

一、获取登录用户的网络IP public String getIpAddress(HttpServletRequest request) {String ipAddress request.getHeader("x-forwarded-for");if (ipAddress null || ipAddress.length() 0 || "unknown".equalsIgnoreCase(ipAddress)) {ipAddress …

jdk和IDEA教育版下载和安装详解

前言 研究生专业是通信系统,为了寻找实习于是在研二时期学习java。但是在学习java的过程中没有进行系统总结,很多知识点或者一些细节已经忘记。由于工作找的是某行软件中心的软件开发。准备在毕业前对java知识进行系统性学习。本专栏将从零基础开始,从最简单的jdk和IDEA下载…

李沐机器学习系列3---深度学习计算

1 层和块 1.1 定义块 用class表示层&#xff0c;并只需要实现构造函数和前向传播函数 class MLP(nn.Module):# 用模型参数声明层。这里&#xff0c;我们声明两个全连接的层def __init__(self):# 调用MLP的父类Module的构造函数来执行必要的初始化。# 这样&#xff0c;在类实…

delete后,指针还能使用?!

int *bnew int(10);delete b;*b5;qDebug()<<*b; 结果&#xff1a;5 delete释放后的指针为什么还可以用-CSDN社区 delete后&#xff0c;系统只是把指针指向的堆空间回收&#xff0c; 但是没有将这个指针变量的值赋值为nullptr&#xff0c; 指针还是指向原来的堆空间&#…

Java学习苦旅(十六)——List

本篇博客将详细讲解Java中的List。 文章目录 预备知识——初识泛型泛型的引入泛型小结 预备知识——包装类基本数据类型和包装类直接对应关系装包与拆包 ArrayList简介ArrayList使用ArrayList的构造ArrayList常见操作ArrayList遍历 结尾 预备知识——初识泛型 泛型的引入 我…

vmware安装龙蜥操作系统

vmware安装龙蜥操作系统 1、下载龙蜥操作系统 8.8 镜像文件2、安装龙蜥操作系统 8.83、配置龙蜥操作系统 8.83.1、配置静态IP地址 和 dns3.2、查看磁盘分区3.3、查看系统版本 1、下载龙蜥操作系统 8.8 镜像文件 这里选择 2023年2月发布的 8.8 版本 官方下载链接 https://mirro…

Cytoscape3.8安装下载及安装教程

Cytoscape3.8下载链接&#xff1a;https://docs.qq.com/doc/DUmhZQ1lqTWhuSXJC 1.选中下载好的安装包右键选择“解压到 Cytoscape3.8.0”文件夹 2.打开解压好的”Cytoscape3.8.0“文件夹 3.选中“Cytoscape_3_8_0_windows_64bit.exe“右键以管理员身份运行 4.点击”Download“&…