视频链接:【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili
ps:以下内容根据视频总结
1、表单
6.1 form
属性:
action 表单提交地址的地方——说明要把数据提交到哪里。
method 提交方式——分为get和post
get 和 post
get请求是把参数直接跟在地址的后面,而post不会。
导致:get是暴漏出来的,不安全。post相对于get来讲,比较安全。
get跟在地址后面,数据传递有限。
但是:get的速度是post的两倍。非常快。why?有缓存
so: 当在做查询时,用get
用添加修改时,用post
name 就是给个名字而已(名称) 所有的表单都有这个属性 id 唯一标识
target 表单提交打开方式(默认当前窗口)
6.2 input
以下为简记:
checked="checked" 默认选中可以
写disabled或者disabled=“disabled 不想让人选中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单及表单元素</title>
</head>
<body>
<form action="# method="get" id="myform" name="myform">
编号:<input type="hidden" name="userId" value="1" /> <br>
姓名:<input type="text" value="zhangsan" name="userName"/><br>
密码:<input type="password" name="userPwd"/><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"/>
跳舞<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="userFile"/><br>
<input type="button" value="普通按钮" />
<input type="reset" value="重置按钮" />
<input type="submit" value="提交按钮" />
<input type="image" src="img/a.jpg"/>
</form>
</body>
</html>
”
6.3 textarea
简介:<textarea name="remark" rows="10" cols="20">11111</textarea><br>
6.4 label
聚焦效果:
<label for="Wang">姓名</label>:<input type="text" value="zhangsan" id="Wang" name="userName"/><br>
出现这个效果:
设置label标签的for属性值与表单元素的id属性值对应,当点击label标签时,会自动给表单元素聚焦
6.5 button
单标签
双标签
双标签里面可以加颜色啥的
button按钮
type:
button普通按钮 submit提交按钮(默认值) reset重置按钮
6.6 select
下拉框:
注:当option设置了value属性值时,提交的数据是value对应的值;
如果未设置value,则提交的数据是文本值
出现的结果为:
多选:
效果:
禁用和上面的一样
7.常用字符实体
字符实体
就是想写前面的这些符号时,将其换成后面的(不要忘记后面分号)