html+css 对input的使用以及详解

表单

form标签主要用于收集用户信息,对表单结果的处理和发送

使用场景:登录页面、注册页面、搜索区域

form属性描述
action规定当提交表单时向何处发送表单数据
method规定用于发送表单数据的 HTTP 方法
name规定表单的名称
target规定在何处打开 action URL。(_blank _self)

创建表单form

<form name="表单名" action="URL" methods="get/post">
</form>

action属性:指向服务器地址

input的type属性值

input根据不同的type属性值来定义不同的功能

input的type属性值描述
text单行文本输入框
number只能输入数字,会出现数字增减按钮
password密码输入框,有的浏览器会有隐藏显示按钮
radio单选按钮,checked属性在radio、checkbox中生效
checkbox复选框
reset重置按钮,在form表单中才有作用,要配合form使用,value值默认为重置
submit提交按钮,在form中才有作用,value值默认为提交
button普通按钮,默认无功能,之后配合js添加功能
以下为不常用的
email邮箱输入框
tel电话号输入框
search搜索框,会出现清空按钮
date日期选择器
month月份选择器
week选择哪一年的第几周
time时间选择器
file选择文件空间,用于上传文件
image图片形式的提交按钮
hidden隐藏的输入区域
color让用户从拾色器中选择一个颜色

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

autocomplete="off" 关闭自动补全

readonly 设置为只读,不能修改

disabled 设置为禁用

autofocus 自动获取焦点

placeholder 提示内容

maxlength=“数字” 能够输入的最长字符

required 必填项,不填写会报提示,并且阻止用户的下一步操作

input标签的name属性

name属性的作用如下:

  • 表单提交:当用户填写表单并提交时,name属性指定的字段名称将与该字段的值一起作为键值对传递到服务器端。服务器端可以通过这个名称来获取对应字段的值,以便处理用户提交的数据。

  • 数据处理和服务器端编程:在服务器端编程中,可以使用name属性来标识和操作表单字段的值。在后端编程语言如PHPPythonJava中,可以使用表单字段的name属性来获取对应字段的值,并进行相应的数据处理。

  • JavaScript操作:通过name属性,可以使用JavaScript来获取、修改或验证表单字段的值。例如,使用document.getElementsByName()方法获取具有特定name属性的所有元素。

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; /*提示文字大小*/
}

单选框

常用属性

属性名作用描述
name控件名称控件分组,同组只能选中一个(单选功能)
checked默认选中属性名和属性值相同,简写为一个单词
<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>  <!--上传多个文件-->

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

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

相关文章

矩阵式键盘按键值的数码管显示实验

#include<reg51.h> //包含51单片机寄存器定义的头文件 sbit P14P1^4; //将P14位定义为P1.4引脚 sbit P15P1^5; //将P15位定义为P1.5引脚 sbit P16P1^6; //将P16位定义为P1.6引脚 sbit P17P1^7; //将P17位定义为P1.7引脚 unsigned char code Tab[ ]…

CTF-PWN-栈溢出-高级ROP-【SROP】

文章目录 linux信息处理2017 360春秋杯 smallest检查源码思路第一次要执行ret时的栈执行write函数时修改rsp到泄露的栈地址上去 输入/bin/sh并sigreturn调用系统调用回忆exp注意一个离离原上谱的地方 参考链接 SROP(Sigreturn Oriented Programming) 于 2014 年被 Vrije Univer…

简单多状态dp问题(打家劫舍Ⅱ)

通过分类谈论&#xff0c;将环形的问题&#xff0c;转化成两个线性的 “ 打家劫舍Ⅰ ” 1.状态表示 2.状态转移方程 3.初始化 f[ 0 ] nums[ 0 ] g[ 0 ] 0 4.填表顺序 从左往右填表&#xff0c;两个表一块填 5.返回值 max( f[ n-1 ] , g [ n - 1 ] )

【Bug】Android BottomNavigationView 图标黑色色块问题

最近在研究Android Jetpack组件&#xff0c;在使用Navigation配合底部导航栏时&#xff0c;发现一个奇怪的问题&#xff0c;如下&#xff1a; 说明&#xff1a;图标来源于Iconfont开源图标库 我的第三个图标变成了一个黑色色块&#xff0c;这个问题前两天我遇见过&#xff0c…

.NetCore部署微服务(一)

目录 前言 什么是微服务 微服务的优势 微服务的原则 创建项目 在Docker中运行服务 客户端调用 简单的集群服务 前言 写这篇文章旨在用最简单的代码阐述一下微服务 什么是微服务 微服务描述了从单独可部署的服务构建分布式应用程序的体系结构流程&#xff0c;同时这些…

C# 使用Microsoft消息队列(MSMQ)

写在前面 Microsoft Message Queuing (MSMQ) 是在多个不同的应用之间实现相互通信的一种异步传输模式&#xff0c;相互通信的应用可以分布于同一台机器上&#xff0c;也可以分布于相连的网络空间中的任一位置。 使用消息队列可以实现异步通讯&#xff0c;无需关心接收端是否在…

海康威视摄像头+服务器+录像机配置校园围墙安全侦测区域入侵侦测+越界侦测.docx

一、适用场景 1、校园内&#xff0c;防止课外时间翻越围墙到校外、从校外翻越围墙到校内&#xff1b; 2、通过服务器摄像头的侦测功能及时抓图保存&#xff0c;为不安全因素提供数字化依据&#xff1b; 3、网络录像机保存监控视频&#xff0c;服务器保存抓拍到的入侵与越界&am…

UI自动化Selenium iframe切换多层嵌套

IFRAME是HTML标签&#xff0c;作用是文档中的文档&#xff0c;或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。 简单来说&#xff0c;就像房子内的一个个房间一样&#xff1b;你要去房间里拿东西&#xff0c;就得先开门&#xff1b; 如上图…

出现 No such instance field: ‘XXXX‘ 的解决方法

目录 1. 问题所示2. 原理分析3. 解决方法1. 问题所示 作为一个全栈的开发玩家,需要调试前后端的数据传输,方便发现问题所在! 在debug整个项目的时候,检查传输数据的时候,发现前端可以传输,但是后端一直拿不到 出现如下问题:No such instance field: parentModel 截图…

UI5与后端的文件交互(四)

文章目录 前言一、后端开发1. 新建管理模板表格2. 新建Function&#xff0c;动态创建文档 二、修改UI5项目1.Table里添加下载证明列2. 实现onClickDown事件 三、测试四、附 前言 这系列文章详细记录在Fiori应用中如何在前端和后端之间使用文件进行交互。 这篇的主要内容有&…

Leetcode的AC指南 —— 字符串/卡码网:55. 右旋字符串

摘要&#xff1a; Leetcode的AC指南 —— 字符串/卡码网&#xff1a;55. 右旋字符串。题目介绍&#xff1a;字符串的右旋转操作是把字符串尾部的若干个字符转移到字符串的前面。给定一个字符串 s 和一个正整数 k&#xff0c;请编写一个函数&#xff0c;将字符串中的后面 k 个字…

灸哥问答:数据结构对软件开发的作用

在软件开发的浩瀚海洋中&#xff0c;数据结构如同一座坚固的灯塔&#xff0c;为开发者指明方向&#xff0c;确保他们在构建复杂系统时不会迷失。数据结构不仅仅是编程的基础&#xff0c;更是高效、稳定、可扩展软件的核心。 一、提升算法效率 数据结构与算法紧密相连&#xf…

antd——a-date-picker——日期的限制功能——js基础积累

antd——a-date-picker——日期的限制功能——js基础积累 禁用日期一、限制只能选明天及之后的日期&#xff08;今天不可选中&#xff09;二、限制只能选今天及之后的日期&#xff08;今天可选中&#xff09;三、限制只能选昨天及之前的日期&#xff08;今天不可选中&#xff0…

Java业务功能并发问题处理

业务场景&#xff1a; 笔者负责的功能需要调用其他系统的进行审批&#xff0c;而接口的调用过程耗时有点长&#xff08;可能长达10秒&#xff09;&#xff0c;一个订单能被多个人提交审批&#xff0c;当订单已提交后会更改为审批中&#xff0c;不能再次审批&#xff08;下游系…

05-微服务-RabbitMQ-概述

RabbitMQ 1.初识MQ 1.1.同步和异步通讯 微服务间通讯有同步和异步两种方式&#xff1a; 同步通讯&#xff1a;就像打电话&#xff0c;需要实时响应。 异步通讯&#xff1a;就像发邮件&#xff0c;不需要马上回复。 两种方式各有优劣&#xff0c;打电话可以立即得到响应&am…

canvas设置文字阴影

查看专栏目录 canvas示例教程100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…

MySQL之CRUD、常见函数及union查询

目录 一. CRUD 1.1 什么是crud 1.2 SELECT(查询) 1.3 INSERT(新增) 1.4 UPDATE(修改) 1.5 DELETE(删除) 二. 函数 2.1 常见函数 2.2 流程控制函数 2.3 聚合函数 三. union与union all 3.1 union 3.2 union all 3.3 具体不同 3.4 结论 四. 思维导图 一. CRUD 1.1 什么是crud…

【愚公系列】2023年12月 HarmonyOS应用开发者高级认证(完美答案)

&#x1f3c6; 作者简介&#xff0c;愚公搬代码 &#x1f3c6;《头衔》&#xff1a;华为云特约编辑&#xff0c;华为云云享专家&#xff0c;华为开发者专家&#xff0c;华为产品云测专家&#xff0c;CSDN博客专家&#xff0c;CSDN商业化专家&#xff0c;阿里云专家博主&#xf…

6. Mybatis 缓存

6. Mybatis 缓存 MyBatis 包含一个非常强大的查询缓存特性,它可以非常方便地配置和定制。缓存可以极大的提升查询效率MyBatis系统中默认定义了两级缓存 一级缓存二级缓存 默认情况下&#xff0c;只有一级缓存&#xff08;SqlSession级别的缓存&#xff0c;也称为本地缓存&…

Transforer逐模块讲解

本文将按照transformer的结构图依次对各个模块进行讲解&#xff1a; 可以看一下模型的大致结构&#xff1a;主要有encode和decode两大部分组成&#xff0c;数据经过词embedding以及位置embedding得到encode的时输入数据 输入部分 embedding就是从原始数据中提取出单词或位置&…