[JavaScript知识库]第二次前端培训（HTML)

?表单

1. form标签 表单标签 块状元素，能自动换行 将数据传递给服务器

常用属性：

? ? ?? ? ??action：表单提交的地址url（必须）

? ? ? ? ?? id ：唯一标识

? ? ? ? ? ?name：名称（所有的标签都有id和name）

? ? ? ? ? ?target：表单提交打开方式——是在当前窗口还是另外开一个窗口(默认当前窗口，故一般? ? ? ? ? ? ? ? ? ? ? ? ? ? ?不用写这个属性)

? ? ? ? ? ?method：提交方式，有两种get和post.（默认是get)

get和post提交方式的区别：

get请求：参数会直接跟在url后面，用问号拼接。安全性差，但是传递的数据量小，有缓存，效率高（是post速度的两倍）适合查找信息的时候用

post请求：参数不会直接跟在url地址栏后面，会放在请求体中。安全性高，传输数据量大，无缓存，速度相对慢 适合添加，修改信息的时候用

2. input 标签（表单元素）??用于搜集用户信息（注意：表单元素一般都需要设置name属性值，否则数据无法传递！！！）

常用属性：

? ? ? ? ? ? ?type：表单元素的类型

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text：文本框

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? password：密码框

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? radio：单选框（需要设置一组相同的name属性值）

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? checkbox：复选框（需要设置一组相同的name属性值）

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? button：普通按钮

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? hidden：隐藏域（用来存放需要传递给服务器，但不需要显示的数据）

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? file：文件域（上传文件）

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? date：时间

? ? ? ? ? ? ? ? ? ? ? ? ? ?? ?submit：提交按钮

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? reset：重置按钮

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? image：图片按钮（提交按钮）

? ? ? ? ? ? ? ? ? ? value：表单元素的值

? ? ? ? ? ? ? ? ? ? checked：是否选中（单选框/复选框）

? ? ? ? ? ? ? ? ? ? disabled：是否禁用

? ? ? ? ? ? ? ? ? ? maxlength：允许输入的最大字符

? ? ? ? ? ? ? ? ? ? .......

基本功能参考代码：

<form action="#" id="myform" name="myform">
			编号:<input type="hidden" name="userId" value="1"/><br />
			密码:<input type="password" name="userPwd" maxlength="6"id="userName"/><br />
			性别:男<input type="radio" name="userSex" value="man" checked="checked"/>
			     女<input type="radio" name="userSex" value="man" /><br />
		    爱好：唱歌<input type="checkbox" name="userhobby" value="sing" disabled="disabled"/>
			      跳舞<input type="checkbox" name="userhobby" value="dance" />
				  说唱<input type="checkbox" name="userhobby" value="rap" /><br />
			生日：<input type="date" name="userDATE"  /><br />
			头像：<input type="file" name="userHead"/><br />
			<input type="button" value="普通按钮"/>
			<input type="reset" value="重置按钮"/>
			<input type="submit" value="提交按钮"/>
			<input type="image"  src="img/loii.PNG"/>
</form>

3.textarea标签?

可通过cols和rows属性来规定文本框的尺寸（文本框所能看到的部分，可以输入很多数据，但是可见范围只有文本框大小，是有限的），cols规定文本框内的可见宽度，rows规定文本框的可见行数。它是一个双标签，同样它也是一个表单元素，需要写上name值。文本写在双标签之间，对比input，文本是写在input的value值里面。

例如：

简介：<textarea name="remark" cols="50" rows="5">111111</textarea>

4.label标签

label标签为input元素定义标注（标记）功能是聚焦

label标签的for属性应该与相关元素的id属性相同

<label for="userName">姓名</label>:<input type="text" name="userName" id="userName"/><br />

5.button标签

按钮(默认是提交按钮)

<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>

6.select标签

用于定义下拉列表

属性：

? ? ? ?disabled：禁用该下拉框

? ? ? ?multiple：规定可选择多个选项

? ? ?? size：规定下拉列表中可见选项的数目

? ? ? ?name：规定下拉列表的名称

<select name="">

? ? ? ? ? <option? value="">文本</option>

</select>

注：当option设置了属性值时，提交的数据是value对应的值，没有设置时，提交的是数据是文本值

<select name="city">
				<option>请选择城市</option>(默认选用第一个)
				<option>北京</option>
				<option>上海</option>
				<option>杭州</option>
</select>

常用字符实体

<? ?&lt

>? ?&gt

空格? ?&nbsp

版权符? &copy

? ? ???注：1.不是在form标签里面的元素就是表单元素，表单元素基本上要设置name值，有的不需要，比如按钮。

? ? ? ? ? ? 2.input里面一般都需要设置type，name，value看情况（单选框，多选框，隐藏框必须设置value）

? ? ? ? ? ? 3.type，value是设置给用户看的，name是传递给服务器的 。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ??