1. 视频链接
【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili
2. 教程链接
3. 表单
3.1 form
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
form标签用于为用户输入创建HTML表单。
表单能够包含input 元素,比如文本字段、复选框、单选框、提交按钮等等。还可以包含textarea等元素。表单用于向服务器传输数据。form元素是块级元素,其前后会产生折行。
method:表单提交方式: get.post get常用于搜索 post常用于提交上传等
get:默认,主动的获取方式,数据放在url上,数据的容量有限,安全性差,有缓存
post:数据放在请求实体中,数据量理论上没有限制,相对安全,没有缓存
3.2 input
input标签用于搜集用户信息。
根据不同的type属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、单选按钮、按钮等等。
每一个表单必须具有name和id,单选框标签radio,比如性别:男女二选一时,就需要设置这两个radio的name相同才能保证不能同时被选中。复选框标签checkbox,name也需要设置相同。
实例代码:
<!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"/>
女<input type="radio" name="userSex" value="woman" /> <br>
爱好:唱歌<input type="checkbox" name="userHobby" value="sing" /> <br />
跳舞<input type="checkbox" name="userHobby" value="dance"/> <br />
说唱<input type="checkbox" name="userHobby" value="rap"/> <br />
生日:<input type="date" name="userData" /> <br />
头像:<input type="file" name="userHead" /> <br />
<input type="button" value="普通按钮" />
<input type="reset" value="重置按钮" />
<input type="submit" value="提交按钮" />
<input type="image" src="img/baidu.png" />
</form>
</body>
</html>
实例效果:
3.3 textarea
该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本,可以通过cols和rows属性来规定textarea的尺寸。cols规定文本区内的可见宽度。rows规定文本区内的可见行数。
简介:<textarea name="remark" rows="5" cols="50">11111</textarea> <br />
3.4 label
label标签为input元素定义标注(标记)。label元素不会呈现任何的特殊效果。
label标签的 for属性应当与相关元素的id属性相同,此时点击label标签会自动为元素聚焦
3.5 button
实例代码
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
3.6 select
select用于定义下拉列表
实例代码:
城市:
<select name="city">
<option>请选择城市</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="hangzhou">杭州</option>
</select>
注:当option设置了value属性值时,提交的数据是value对应的值;如果未设置value,则提交的数据是文本值
4.常用字符实体
在HTML中,某些字符是预留的。
在HTML中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符,我们必须在HTML源代码中使用字符实体(character entities)。实体名称对大小写敏感!
5.实践补充(onfocus,onblur,onclick)
当 input 输入框获取焦点时执行一段 Javascript代码:
onfocus 事件在对象获得焦点时发生。
Onfocus 通常用于 <input>, <select>, 和<a>.
提示: onfocus 事件的相反事件为 onblur 事件。
实例:
<input type="text" value="请输入关键字" name="sousuo" style="width: 150px; height: 25px;"value="请输入关键字" onfocus="if (this.value === '请输入关键字') { this.value = ''; }" onblur="if (this.value === '') { this.value = '请输入关键字'; }" />
效果:
鼠标点击(聚集时)请输入关键字会消失变为空,失去聚焦时如果搜索框中为空,则又变回请输入关键字
onclick
鼠标点击事件:当按钮被点击时执行Javascript代码:
实例:点击上图输入框旁边的搜索图标时就会执行Javascript代码,跳转至相应界面
<input type="image" name="search" src="../img/搜索.png" onclick='window.open("http://www.zzuli.edu.cn/_web/_search/api/search/new.rst?locale=zh_CN&request_locale=zh_CN&_p=YXM9NSZ0PTE0MTgmZD0zOTkwJnA9MSZtPVNOJg__")'/>