科技资讯

Document

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添加功能
file 选择文件，用于上传文件
以下为不常用的
email 邮箱输入框
tel 电话号输入框
search 搜索框，会出现清空按钮
date 日期选择器
month 月份选择器
week 选择哪一年的第几周
time 时间选择器
image 图片形式的提交按钮
hidden 隐藏的输入区域
color 让用户从拾色器中选择一个颜色

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

autocomplete="off" 关闭自动补全

readonly 设置为只读，不能修改

disabled 设置为禁用

autofocus 自动获取焦点

placeholder 提示内容

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

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

input标签的name属性

name属性的作用如下：

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

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

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

input标签的value属性

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

  • 当 type 的取值为 button、reset、submit 中的其中一个时，此时 value 属性的值表示的是按钮上显示的文本

    在这里插入图片描述

  • 当 type 的取值为 text、password、hidden 中的其中一个时，此时 value 属性的值表示的是输入框中显示的初始值，此初始值可以更改，并且在提交表单时，value 属性的值会发送给服务器（既是初始值，也是提交给服务器的值）
    在这里插入图片描述

  • 当 type 的取值为 checkbox、radio 中的其中一个时，此时 value 属性的值表示的是提交给服务器的值

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

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

    type="image" 定义图像形式的提交按钮，可以通过调整input的width和height来改变图片的大小。必须把 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>  <!--上传多个文件-->