一.表单标签
1.表单标签:收集、采集信息。
举个例子:做用户登录、注册功能,就需要收集用户的账号、密码等等信息。
2.form 标签点击“提交”按钮,会刷新页面,页面会发生跳转。。
3.action:填写服务器接口地址
method:填写请求方法
注:可以给action属性设置“#”阻止默认行为(跳转、刷新)
4.placeholder :表示占位符,做提示
5.name:键(key),需要提交的参数名称
<style>
input {
height: 40px;
width: 460px;
}
button {
height: 48px;
width: 470px;
}
/*
问题: 为什么input标签和button标签的高度都等于40,效果却不一样。因为各自所默认的样式不同。
*/
</style>
<form action="http://47.92.204.130:3000/api/admin/login" method="POST">
<div>
<!--
type 类型,text 文本输入框
placeholder , 表示占位符,做提示
name 键(key), 需要提交的参数的名称 参数: admin_email 、 admin_pwd
-->
<input type="text" placeholder="请输入账号" name="admin_email">
</div>
<br>
<div>
<!-- <input type="text" placeholder="请输入密码" name="admin_pwd"> -->
<!-- type 类型,password 密码输入框 -->
<input type="password" placeholder="请输入密码" name="admin_pwd">
</div>
<br>
<div>
<!-- <button>登录</button> -->
<!-- type 类型,button 表示按钮 -->
<!-- <input type="button" value="登录"> -->
<input type="submit" value="登录">
</div>
</form>
</body>
6.常见的type:
(1)text:
<input type="text" placeholder="文本输入框">
(2)password:
<input type="password" placeholder="密码输入框">
(3)number:
<input type="number" placeholder="请输入数字">
(4)date:
<input type="date">
(5)time:
<input type="time">
(6)color:
<input type="color" value="#00ff00">
(7)button ;submit; reset:
<input type="button" value="按钮">
<input type="submit" value="提交">
<input type="reset" value="重置">
(8)radio:
注:加上name才能实现只能点击一个;
checked 在单选框、复选框中,视为默认勾选的意思。
性别:
<input type="radio" name="sex" value="1"> 男
<input type="radio" name="sex" value="2"> 女
<input type="radio" name="sex" checked value="3"> 未知
(9)checkbox:
爱好:
<input type="checkbox">阅读
<input type="checkbox">跑步
<input type="checkbox">游泳
<input type="checkbox">骑行
(10)select ;option:
注:(1)selected 在下拉菜单中,视为默认选中的意思
(2) disabled 禁止、禁止输入、禁止选择
<select name="province">
<option value="0" disabled>请选择省份</option>
<option value="1">广东省</option>
<option value="1">浙江省</option>
<option value="1" selected>福建省</option>
<option value="1">湖北省</option>
</select>
(11)file:
注:multiple 加了这个属性,表示可以选择多个文件
<input type="file" name="photo">
<br>
<input type="file" name="photo" multiple>
7.label:起到说明、描述作用的标签
注:label标签的for属性 对应input标签的id属性、点击描述文本,输入框可以获取焦点
<label for="username">用户名:</label>
<input type="text" id="username">
</div>
8.文本输入域标签(textarea)
1.textarea:行内块标签(在同一行显示,可以直接设置宽度高度)
2.text-align: center 作用:设置文本、行内元素、行内块元素水平居中
3.resize: none 作用:禁止用户拖拽缩放文本输入域标签
.text-box {
width:420px;
height: 80px;
/* 禁止用户拖拽缩放文本输入域标签 */
resize: none;
font-size: 20px;
}