文章目录
- 表单
- 创建表单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
的取值为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; /*提示文字大小*/
}
单选框
常用属性
<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
嵌套 option
,select
是下拉菜单整体,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 标签(表单区域)才能实现对应的功能。