[JavaScript知识库]第二次网页前端培训笔记（html表单）

学习网址：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

1.?表单标签和表单元素

（1）表单标签：form用于为用户输入创建html表单可包含input元素（eg：文本字段，复选框，单选框，提交按钮等）和textarea等元素
?? ??? ? ? ? ? ?form块级元素，会自动换行，将数据传输给服务器；
?? ??? ??? ??? ?常用属性：action：表单提交地址；id：唯一标识；name：名称；target：表单提交打开方式（当前窗口）；
?? ??? ??? ??? ?method：提交方式（get请求：参数会直接跟在url后面，用问号拼接，安全性差，传递的数据量小，效率高是post的2倍，有缓存；post请求：参数放在请求提3中，安全性高，传输数据量大，速度相对较慢，无缓存）默认为get。

实例：

<form>
.
input 元素
.
</form

实例：一些表单标签及用法（出自菜鸟教程）

（2）表单元素：input元素：type 表单元素的类型：text 文本框；password 密码框；radio 单选框（需要设置一组相同的name属性）；checkbox 复选框（需要设置一组相同的name属性）
?? ??? ??? ?button 普通按钮；hidden 隐藏域（用来存放需要传递给服务器，但不需要显示的数据；file 文件域（上传文件）；date 日期框；subnit 提交按钮；reset 重置按钮；
?? ??? ??? ?image图片按钮（提交按钮）；value 表单元素的值；checked 是否选中（单选框/复选框）disabled 是否禁用；maxlength允许输入的最大字符

label标签：设置label标签的for属性值与表单元素的id属性值对应，当点击label标签时，鼠标会自动聚焦
?? ??? ??? ?button按钮：type button（普通按钮）；submit（提交按钮，默认值）；reset （重置按钮）
?? ??? ??? ?select下拉选项
?? ??? ??? ?<select name=""><option value="值">文本</option></select>
?? ??? ??? ?注：当option设置来value属性值时，提交的数据是value对应的值；若未设置value,则提交数据是文本值
?? ??? ??? ?常用属性：value：设置值；selected：设置选中状态
?? ??? ? ? ?表单元素都需要设置那么属性值，否则数据无法传递！

实例及运行效果：

<form action="#" method="get" id="myform" name="myform">
编号：<input type="hidden" name="usersId" value="1"/><br>
		<label for="usersName">姓名</label>：<input type="text" id="usersName" name="usersName" value="zhangsan"/><br>
		密码：<input type="password" name="usersName" maxlength="6" value="zhangsan"/><br>
		性别：
			男<input type="radio" name="usersSex" value="man" checked="checked"/>
			女<input type="radio" name="usersSex" value="woman" checked="checked"/><br>
		爱好：
			唱歌<input type="checkbox" name="usersHobby" value="sing" />
			跳舞<input type="checkbox" name="usersHobby" value="dance" checked="checked"/>
			说唱<input type="checkbox" name="usersHobby" value="rap" disabled="disabled"/><br>
		生日：<input type="date" name="usersDate" /><br>
		头像：<input type="file" name="usersHead" /><br>
		简介：<textarea name="remark" row="5" cols="50">介绍一哈你自己呀</textarea><br>
		城市：
			<select name="city" multiple="multiple" size="5">
				<option value="">请选择城市</option>
				<option value="chongqing">重庆</option>
				<option value="beijing" disabled="disabled">北京</option>
				<option value="shnaghai">上海</option>
				<option value="guangzhou">广州</option>
				<option value="xiamen">厦门</option>
			</select><br>
		<input type="button" value="普通按钮" />
		<input type="reset" value="重置按钮" />
		<input type="submit" value="提交按钮" />
		<!--<input type="image" srk="img/x.png" />-->
		<button type="button">普通按钮</button>
		<button type="submit">提交按钮</button>
		<button type="reset">重置按钮</button>
		</form>
		

2.常用字符实体

?字符实体：
?? ??? ?<? ? ? ? ???&lt
?? ??? ?>? ? ? ? ? ?&gt
?? ??? ?空格? ? ? &nbsp
?? ??? ?版权符 ?&copy-->

实例及运行效果：

	&lt&lt&lt&lt大家新年快乐呀&lt&lt&gt&gt&gt&gt&nbsp&nbsp&nbsp&nbsp&nbsp&gt&gt&gt&copy&copy&copy