学习地址:
【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili
表单
1.form
from标签用于为用户输入创建html表单
表单能够包含input元素,比如文字段、复选框、单选框、提交按钮等等。还可以包含text area元素等。
表单用于向服务器传输数据。form元素是块级元素,其前后会产生拆行。
常用属性:
action 表单提交的地址url
id 唯一标识
name 名称
target 表单提交的方式(当前窗口)
method 提交方式
get请求(默认)
参数会直接跟在url后面,用问号拼接
安全性差,传递的数据量小,效率高,(是post速度的两倍),有缓存
post请求
参数不会直接跟在url后面,会放在请求体中
安全性高,传输数据量大,速度相对来说慢,无缓存
2.input
input标签用于搜集用户信息
根据不同的type属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、单选按钮、按钮等等。
常用属性:
input元素
type 表单元素的类型
text 文本框
password 密码框
radio 单选框
checkbox 复选框
button 普通按钮
hidden 隐藏域
file 文件域(上传文件)
date 日期框
submit 提交按钮
reset 重置按钮
image 图片按钮
value 表单元素的值
checked 是否被选中
disabled 是否禁用
maxlength 允许输入的最大字符
textare文本域
cols 和rows
label标签
设置label标签的for属性值与表单元素的id属性值相对应,当点击label标签时,会自动给 表单元素聚焦
button按钮
type
button普通按钮
submit提交按钮
reset重置按钮
select下拉框
<select name="">
<option value="">content</option>
</select>
注:当option设置了value属性时,提交的数据时value对应的值;
如果未设置value,则提交的数据是文本值
常用属性
value 设置值
selected 设置选中状态
<form action="http://www.baidu.com" method="get" id="myform" name="myform">
编号:<input type="hidden" name="userId" value="1" /><br>
姓名:<input type="text" name="userName" value="zhangsan" /><br>
密码:<input type="password" name="userPassword" value="" maxlength="6"/><br>
性别:男<input type="radio" name="usersex" value="man" checked="checked"/>
女<input type="radio" name="usersex" value="woman"/><br>
爱好:唱歌<input type="checkbox" name="userHobby" value="sing" checked="checked"/>
跳舞<input type="checkbox" name="userHobby" value="dance" />
说唱<input type="checkbox" name="userHobby" value="rap" disabled="disabled"/><br>
生日:<input type="date" name="userDate" /><br>
头像:<input type="file" name="userHead" /><br>
简介:<textarea name="remark" rows="5" cols="50" />11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</textarea><br>
城市:<select name="city" size="5" multiple="multiple">
<option value="beijing">请选择城市</option>
<option value="beijng">北京</option>
<option value="shanghai">上海</option>
<option value="luoyang">洛阳</option>
<option value="zhengzhou">郑州</option>
<option value="zhengzhou">西安</option>
<option value="zhengzhou">南京</option>
</select>
<br>
<input type="image" src="../img/2.jpg" /><br>
<input type="button" value="普通按钮"/>
<input type="reset" value="重置按钮" />
<input type="submit" value="提交按钮" /><br>
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
</form>