第二次网页前端培训笔记（表单）

菜鸟不是

已于 2022-02-05 12:48:45 修改

阅读量369

点赞数

文章标签：前端 html5

于 2022-02-05 12:48:21 首次发布

本文链接：https://blog.csdn.net/m0_52665223/article/details/122784906

版权

表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置：块级元素，会自动换行，将数据传输给服务器。

常用属性：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="https://www.baidu.com" method="get" id="myform" name="myform">
			编号：<input type="hidden" name="userID" value="1"/><br>
			姓名：<input type="text" name="userName" value="zhangsan"/><br>
			密码：<input type="password" name="userPwd"/><br>
			性别：男<input type="radio" name="userSex" value="man"/>
				  女<input type="radio" name="userSex" value="woman"/><br>
			爱好：唱歌<input type="checkbox" name="userHobby" value="sing"/>
				 跳舞<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/国家体育馆.jpg"/>
		</form>
	</body>
</html>

其它常用表单标签

<textarea> 标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		简介：<textarea name="remark" rows="5" cols="50">111111</textarea>
	</body>
</html>

<button> 标签定义一个按钮。在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。提示：请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<button type="button">普通按钮</button>
	    <button type="submit">提交按钮</button>
		<button type="reset">重置按钮</button>
	</body>
</html>

<select> 元素用来创建下拉列表。<select> 元素中的<option> 标签定义了列表中的可用选项。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		城市：<select name="city" multiple="multiple">
				<option>请选择城市</option>
				<option value="beijing">北京</option>
				<option value="shanghai">上海</option>
				<option value="hangzhou">杭州</option>
				<option value="shenzhen">深圳</option>
				</select>
	</body>
</html>

<label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。

常用字符实体

<	&lt
>	&gt
空格	&nbsp
版权符	&copy

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		&lt;h2&gt;hello&copy;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; world&lt;/h2&gt;
	</body>
</html>

菜鸟不是

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二次网页前端培训笔记（表单）

表单表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签 <form> 来设置：块级元素，会自动换行，将数据传输给服务器。常用属性：action 表单提交的地址url id 唯一标识 target 表单提交打开方式 name 名称 method 提交方式：get请求 .
复制链接

扫一扫