表单
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添加功能 |
| 以下为不常用的 | |
| 邮箱输入框 | |
| 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属性来标识和操作表单字段的值。在后端编程语言如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> <!--上传多个文件-->


