第二次网页前端培训笔记（HTML表单标签&常用字符实体）-CFANZ编程社区

表单

表单元素需要设置name属性值否则数据无法传递

form标签

块级元素会自动换行经数据传输给服务器

常用属性：

action	表单提交的地址
id	唯一标识
name	名称
target	表单提交的打开方式（当前窗口）
method	提交方式： get请求（默认）：参数会直接跟在url后面用问号拼接安全性差传递的数据量小但效率高有缓存访问速率是post的2倍 post请求：参数不会跟在url地址栏后面，会放在请求体中。安全性高,传输数据量大,速度相对来说慢,无缓存。

<html>
	<body>
		<form action="#" methon="get" id="ts" name="ts">
		</form>
	</body>
</html>

input标签

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

<html>
	<body>
		<form action="#" methon="get" id="ts" name="ts">
			编号：<input type="hidden" name="userID" value="1"/><br>
			姓名：<input type="text" name="Username" value="ts"/><br>
			密码: <input type="password" name="userPwd" maxlength="6"/><br>
			性别:男<input type="radio" name="userSex" value="man"/>
			     女<input type="radio" name="userSex" value="woman" checked/><br>
			爱好:唱歌<input type="checkbox" name="userHobby" value="sing"/>
			     跳舞<input type="checkbox" name="userHobby" value="dance" checked="checked"/>
			     说唱<input type="checkbox" name="userHobby" value="rap" disabled/><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" width="50px" height="50px" align="center" src="img/taylor.jpg"/>
		</form>
	</body>
</html>

此时说唱是不能被选择的默认选择的是跳舞女

textarea文本域(双标签）

clos：文本域的长 rows：文本域的宽

<html>
	<head></head>
	<body>
		<form action="#" methon="get" id="ts" name="ts">
			编号：<input type="hidden" name="userID" value="1"/><br>
			姓名：<input type="text" name="Username" value="ts"/><br>
			密码: <input type="password" name="userPwd" maxlength="6"/><br>
			性别:男<input type="radio" name="userSex" value="man"/>
			     女<input type="radio" name="userSex" value="woman" checked/><br>
			爱好:唱歌<input type="checkbox" name="userHobby" value="sing"/>
			     跳舞<input type="checkbox" name="userHobby" value="dance" checked="checked"/>
			     说唱<input type="checkbox" name="userHobby" value="rap" disabled/><br>
			生日: <input type="date" name="userDate" /><br>
			头像:<input type="file" name="userHead"/><br>
			简介：<textarea name="remark" rows="10" clos="10"></textarea><!--看这里-->
			<input type="button" value="普通按钮"/>
			<input type="reset" value="重置按钮"/>
			<input type="submit" value="提交按钮"/>
			<input type="image" width="50px" height="50px" align="center" src="img/taylor.jpg"/>
		</form>
	</body>
</html>

label标签

设置label标签的for属性值与表单元素的id属性值对应，当点击label标签时，会自动给表单元素聚焦

<html>
	<head></head>
	<body>
		<form action="#" methon="get" id="ts" name="ts">
			编号：<input type="hidden" name="userID" value="1"/><br>
			<label for="Username">姓名</label>：<input type="text" name="Username" value="ts" id="Username"/><br><!--看这里-->
			密码: <input type="password" name="userPwd" maxlength="6"/><br>
			性别:男<input type="radio" name="userSex" value="man"/>
			     女<input type="radio" name="userSex" value="woman" checked/><br>
			爱好:唱歌<input type="checkbox" name="userHobby" value="sing"/>
			     跳舞<input type="checkbox" name="userHobby" value="dance" checked="checked"/>
			     说唱<input type="checkbox" name="userHobby" value="rap" disabled/><br>
			生日: <input type="date" name="userDate" /><br>
			头像:<input type="file" name="userHead"/><br>
			简介：<textarea name="remark" rows="10" clos="10"></textarea>
			<input type="button" value="普通按钮"/>
			<input type="reset" value="重置按钮"/>
			<input type="submit" value="提交按钮"/>
			<input type="image" width="50px" height="50px" align="center" src="img/taylor.jpg"/>
		</form>
	</body>
</html>

button标签

button普通按钮 submit提交按钮(默认值) reset重置按钮

(相当于上文中input里的按钮但是button里的按钮样式的设置选择更多）

<html>
	<head></head>
	<body>
		<form action="#" methon="get" id="ts" name="ts">
			编号：<input type="hidden" name="userID" value="1"/><br>
			<label for="Username">姓名</label>：<input type="text" name="Username" value="ts" id="Username"/><br>
			密码: <input type="password" name="userPwd" maxlength="6"/><br>
			性别:男<input type="radio" name="userSex" value="man"/>
			     女<input type="radio" name="userSex" value="woman" checked/><br>
			爱好:唱歌<input type="checkbox" name="userHobby" value="sing"/>
			     跳舞<input type="checkbox" name="userHobby" value="dance" checked="checked"/>
			     说唱<input type="checkbox" name="userHobby" value="rap" disabled/><br>
			生日: <input type="date" name="userDate" /><br>
			头像:<input type="file" name="userHead"/><br>
			简介：<textarea name="remark" rows="10" clos="10"></textarea>
			<input type="button" value="普通按钮"/>
			<input type="reset" value="重置按钮"/>
			<input type="submit" value="提交按钮"/>
			<input type="image" width="50px" height="50px" align="center" src="img/taylor.jpg"/>
			<button type="button">普通按钮</button><!--看这里-->
			<button type="submit">提交按钮</button>
			<button type="reset">重置按钮</button>
		</form>
	</body>
</html>

select标签

</ select>

注:当option设置了value属性值时，提交的数据是value对应的值;如果未设置value，则提交的数据是文本值

下拉菜单多项选择：multiple

也可用disabled 类比input(在select里用是整个下拉框都不能选在option里用只是一个选项不能选）

<html>
	<head></head>
	<body>
		<form action="#" methon="get" id="ts" name="ts">
			编号：<input type="hidden" name="userID" value="1"/><br>
			<label for="Username">姓名</label>：<input type="text" name="Username" value="ts" id="Username"/><br>
			密码: <input type="password" name="userPwd" maxlength="6"/><br>
			性别:男<input type="radio" name="userSex" value="man"/>
			     女<input type="radio" name="userSex" value="woman" checked/><br>
			爱好:唱歌<input type="checkbox" name="userHobby" value="sing"/>
			     跳舞<input type="checkbox" name="userHobby" value="dance" checked="checked"/>
			     说唱<input type="checkbox" name="userHobby" value="rap" disabled/><br>
			生日: <input type="date" name="userDate" /><br>
			头像:<input type="file" name="userHead"/><br>
			简介：<textarea name="remark" rows="10" clos="10"></textarea>
			城市：
			    <select name="city" multiple="multiple" size="5"><!--看这里-->
				<option>请选择城市</option>
				<option value="Beijing">北京</option>
				<option value="Zhengzhou">郑州</option>
				<option value="Nashville">纳什维尔</option>
				<option value="Shenzhen">深圳</option>
			</select>
			<br>
			<input type="button" value="普通按钮"/>
			<input type="reset" value="重置按钮"/>
			<input type="submit" value="提交按钮"/>
			<input type="image" width="50px" height="50px" align="center" src="img/taylor.jpg"/>
			<button type="button">普通按钮</button>
			<button type="submit">提交按钮</button>
			<button type="reset">重置按钮</button>
		</form>
	</body>
</html>

常用字符实体

小于号&lt 大于号&gt 空格&nbsp 版权符&copy

<html>
	<head></head>
	<body>
		<h2>字符实体</h2>
	</body>
</html>

<html>
	<head></head>
	<body>
		&lt;h2&gt;字符实体&lt;/h2&gt;
	</body>
</html>