html+css----表单
表单 (input)
注意:表单要在form中
表单标签
### 1. input 输入框 行内块元素
input中的 type属性值
type:设置数据类型
可选值
text 文本
password 密码
radio 单选按钮,在一组数据中选择一个,相同name值的为一组
checkbox 多选框 可以同时选择多个,选中取消操作
email 邮箱,有自带的格式判断
tel 手机号
button 普通按钮
reset 重置
submit 提交,只是将数据提交到浏览器
file 上传文件
date 日期
### 2.下拉框 select 设置下拉框
option 下拉选项
### 3.文本域 textarea
属性
rows 设置行数
cols 设置一行的宽度
### 4.按钮 button 双标签,更方便设置按钮样式
属性
type:
button 普通按钮
reset 重置按钮
submit 提交按钮
### input属性(例:默认选中):
1. checked 设置单选和多选默认选中
2. selected 设置下拉选项的默认选中
3. placeholder 设置提示语
4. maxlength/minlength 设置输入的字符最大和最小的长度
5. required 设置必填项
6. readonly 设置只读,可以选中标签,但是不能修改值
7. disabled 设置禁用,不能选中和修改
8. multiple 设置可以同时选择多个文件
9. autocomplete 设置自动填充,要与name一起联用
10. autofocus 设置自动获取焦点
### label与input标记标签
input的**id**值等于**label**的**for**值
作用:点击文字,就等于点击点选按钮
<form action="demo_form.php">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br><br>
<input type="submit" value="提交">
</form>
datalist:设置input可能选择的标签选项,input的**list**值等于**datalist**的**id**值,option设置选项
<input list="gege"> //没有type="text"也可以用
<datalist id="gege">
<option value="Internet Explorer">
<option value="">gege</option> //这种写法行不通
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
form 表单,同一个form中表单元素为一组
属性:
action:数据提交后跳转地址
method:(get/post)表单数据提交方式
可选值:
get 数据随form跳转的url一起传输,数据内容会在跳转页面的地址栏显示,不能传输敏感数据
post 数据被封装在form内部一起传输,相对安全
target:(_self/_blank)设置跳转页面的显示位置
novalidate:取消数据验证