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

青旅半醒 2024-05-01 16:11 59阅读 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>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_13_color_FFFFFF_t_70_g_se_x_16][]

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

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

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_14_color_FFFFFF_t_70_g_se_x_16][]

**标注：**

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

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_11_color_FFFFFF_t_70_g_se_x_16][]

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

**按钮：<**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>

![38841b151dfc4eb391c11ffbd51f809d.png][]

如果option设置了value值 传送到后台的是value值 否则就是文本框中间给用户看的值

--------------------

**常用字符实体**

< <

> >

空格 &nbsp；

版权符&copy；

<h2>Hello World<h2>

![feff27ba98c5423d8e8e27ae4e7c63d7.png][]

--------------------

**标签的分类**

块级元素：

元素从新的一行开始，其后的元素也另起一行；元素的高度、宽度、底边距都可以设置

行内元素：

与其他元素在同一行；高度、宽度、底边距都不能设置

行内块级元素：

与其他元素在同一行；高度、宽度、底边距都可以设置

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_13_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/8d17fc4224384d04a3c84af5b5cbe153.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_14_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/a163e04a1e0841d9956544442b7cc216.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5amJ5aip5rWB6YC4_size_11_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/246be7ac35f442aab3335a3889842754.png
[38841b151dfc4eb391c11ffbd51f809d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/ce7a10c0ce5c4947972d14c2968f65d6.png
[feff27ba98c5423d8e8e27ae4e7c63d7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/62e5de815b6249a9a2a23ecacead8f28.png