网页前端培训2表单/常用字符实体/标签分类

刹那芳华❀

已于 2022-02-05 17:55:44 修改

阅读量707

点赞数

分类专栏：网页前端培训文章标签：前端 javascript html

于 2022-02-05 17:33:52 首次发布

本文链接：https://blog.csdn.net/qq_61176213/article/details/122785147

版权

网页前端培训专栏收录该内容

7 篇文章 0 订阅

订阅专栏

创建表单：<form>标签用于创建表单，将数据传输给服务器，块级元素（自动换行）

属性：action 表单提交的地址url

id 唯一标识

name 表单的名称

target 表单提交的打开位置（默认当前窗口）

method 提交方式默认为get

get：快，参数会直接跟在url后面，用问号拼接，数据的容量有上限，安全性差，有缓存，一般查询时使用

post：慢，参数不会直接跟在url后面，会放在请求体中，数据的容量没有限制，数据传输量大，安全性好，没有缓存，一般提交时使用

表单搜索信息：input用于搜索用户信息

属性：

name属性值必须设置，否则数据无法传递

type 表单元素的类型：

text文本框

password密码框

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

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

button普通按钮

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

file文件框（上传文件）

date日期框

submit提交按钮

reset重置按钮

image图片按钮（提交按钮）

value 表单元素的值

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

disable是否禁用

maxlength允许输入的最大字符

<!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="李华"name="username" /><br />
			密码 (不显示,最长16位)<input type="password"name="userPwd"maxlength="16" /><br />
			性别 (默认男)男<input type="radio"name="userSex" value="man"checked="checked"/>
					    女<input type="radio"name="userSex" value="woman"/><br />
			爱好	(默认唱歌说唱不能选)唱歌<input type="checkbox"name="usrtHobby" value="sing"checked=""/>
								  跳舞<input type="checkbox"name="usrtHobby" value="dance"/>
								  说唱<input type="checkbox"name="usrtHobby" value="rap"disabled=""/><br />
			生日 <input type="date"name="userDate" /><br />
			头像 <input type="file"name="userHead" /><br />
			普通按钮<input type="button" value="普通按钮"/><br />
			重置按钮<input type="reset"value="重置按钮" /><br />
			提交按钮<input type="submit"value="提交按钮" /><br />
			<input type="image"scr="XXXX" />
		</form>
	</body>
</html>

创建文本域：通过<textarea>定义文本域

属性：cols和rows规定起始可看到的行与列

简介 <textarea name="remake"rows="5"cols="50">请输入您的简介</textarea><br />

标注：

label定义标注，不会呈现任何的特殊效果

label标签for属性与相关元素id值相同时，此时点击label标签会自动为元素聚焦

<label for="123456">姓名</label><input type="text"value="李华"name="username" /><br />
密码 <input type="password"name="userPwd"maxlength="16"id="123456" /><br />

点击“姓名”光标跳转到密码文本框（智熄的操作）

按钮：<button>标签

属性：button普通按钮

submit提交按钮（默认值）

reset重置按钮

按钮的两种写法 单标签与双标签
普通按钮<input type="button" value="普通按钮"/><br />
重置按钮<input type="reset"value="重置按钮" /><br />
提交按钮<input type="submit"value="提交按钮" /><br />
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>

下拉框与下拉框选项：

<select>定义下拉框

属性：

name规定下拉列表的名字

multiple规定可以多选

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

disabled禁用下拉框

<option>定义下拉框选项

属性：

value定义送往服务器的选项值

selscted规定选项表现为选中的状态

disabled禁用选项

城市
<select name="city">
	<option value="">请选择城市</option>
	<option value="Beijing">北京</option>
	<option value="Shanghai">上海</option>
	<option value="Hangzhou">杭州</option>
</select>