02-表单、input、常用字符实体

说酒话的猫

已于 2022-02-06 13:05:04 修改

阅读量317

点赞数

分类专栏： HTML 文章标签： html

于 2022-02-05 21:31:59 首次发布

本文链接：https://blog.csdn.net/W_000/article/details/122792381

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的表单元素，包括<form>标签、<input>标签的各种类型、<textarea>、<label>、<button>和<select>的使用方法。还提到了字符实体、表单属性如method（GET和POST的区别）以及实例展示，帮助理解如何创建和操作HTML表单。

摘要由CSDN通过智能技术生成

1.表单标签

<form>标签用于为用户输入创建HTML表单。
表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等，还可以包含textarea等元素。
表单用于向服务器传输数据。form元素是块级元素，其前后会产生折行。

常用属性：

method（表单提交方式：get. post）：
get：默认，主动的获取方式，数据放在url上，数据的容量有限，安全性差，有缓存。
post：数据放在请求实体中，数据量理论上没有限制，相对安全，没有缓存。

2.input

input标签用于搜集用户信息。
根据不同的type属性值，输入字段拥有很多种形式，可以是文本字段、复选框、单选按钮、按钮等等。

常用属性：

type表单元素的类型：
        text：文本框
        password：密码框
        radio：单选框（需要设置一组相同的name属性值）
        checkbox：复选框（需要设置一组相同的name属性值）
        button：普通按钮
        hidden：隐藏域（用来存放需要传递给服务器，但不需要显示的数据）
        file：文件域（上传文件）
        date：日期框
        submit：提交按钮
        reset：重置按钮
        image：图片按钮（提交按钮）

3.表单元素

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

（1）textarea：文本域

定义多行的文本输入控件。文本区中可容纳无限数量的文本，

通过cols和rows属性来规定textarea的尺寸：cols 规定文本区内的可见宽度。rows 规定文本区内的可见行数。

<textarea>文本</textarea>

（2）label：标签

label标签为input元素定义标注(标记)。

<label for="userName">用户名：</label>
<input type="text" id="userName" name="userName”/>

label元素不会呈现任何的特殊效果。
label标签的for属性应当与相关元素的id属性相同，使点击label标签会自动为元素聚焦。

（3）button：按钮

<button></button>

常用属性：

类型：
        button：普通按钮
        submit：提交按钮（默认值）
        reset：重置按钮

（4）select：下拉列表

<select name="">
	<option value="值">文本</option>
</select>

常用属性：

4.常用字符实体

在HTML中，某些字符是预留的。不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，必须在HTML源代码中使用字符实体（character entities）。

常用字符实体：

实体名称对大小写敏感!

标签元素分类：

块状元素：元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）, 除非设定一个宽度。

行内元素：和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块状元素：和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。

5.实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--
			form标签
				表单标签，块级元素，会自动换行，将数据传输给服务器。
			常用属性:
				action 表单提交的地址url
				id 唯一标识
				name 名称
				target 表单提交打开方式 (当前窗口)
				method 提交方式
					get 请求(默认)，参数会直接跟在url后面，用问号拼接。安全性差，传递的数据量小，效率高（post速度的两倍），有缓存
					post 请求，参数不会跟在url地址栏后面，会放在请求体中。安全性高，传输的数据量大，速度相对来说慢，无缓存。
		-->
		<form action="https://www.baidu.com" method="get" id= ”myform" name=”myform">
			<!--
				表单元素需要设置name属性值，否则数据无法传递! ! !
				input元素
					type 表单元素的类型
						text 文本框
						password 密码框
						radio 单选框（需要设置一组相同的name属性值）
						checkbox复选框（需要设置一组相同的name属性值）
						button 普通按钮
						hidden 隐藏域（用来存放需要传递给服务器，但不需要显示的数据）
						file 文件域（上传文件）
						date 日期框
						submit 提交按钮
						reset 重置按钮
						image 图片按钮（提交按钮）
					value 表单元素的值
					checked 是否选中(单选框/复选框)
					disabled 是否禁用
					maxlength 允许输入的最大字符
					
				textarea文本域
					cols和rows
				label标签
					设置label标签的for属性值与表单元素的id属性值对应，当点击label标签时，会自动给表单元素聚焦。
				button按钮
					type
						button 普通按钮
						submit 提交按钮（默认值）
						reset 重置按钮
				select下拉选项
					<select name="">
						<option value="值">文本</option>
					</select>
					注:当option设置了value属性值时，提交的数据是value对应的值；如果未设置value，则提交的数据是文本值。
					multiple="multiple" 多选


			-->
			编号：<input type="hidden" name= "userId" value="1"/><br>
			<label for="userName">姓名：</label><input type="text" name="userName" value="请输入姓名" id="userName"/><br>
			密码：<input type="password" name="userPwd" maxlength="8"/><br>
			性别：
				男<input type="radio" name="userSex" value="man" checked="checked"/>
				女<input type="radio" name="userSex" value="woman"/><br>
			爱好：
				唱歌<input type="checkbox" name="userHobby" value="sing" checked="checked"/>
				跳舞<input type="checkbox" name="userHobby" value="dance"/>
				说唱<input type="checkbox" name="userHobby" value="rap" disabled="disabled"/><br>
			生日：<input type="date" name="userDate"/><br>
			头像：<input type="file" name="userHead"/><br>
			城市:
				<select name="city" multiple="multiple">
					<option>请选择城市</option>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="hangzhou">杭州</option>
					<option value="shenzhen">深圳</option>
					<option value="guangzhou">广州</option>
				</select><br>
			简介: <textarea name=”remark" rows="5" cols="50">11111</textarea><br>
			<label>input按钮：</label>
			<input type="button" value="普通按钮"/>
			<input type="reset" value="重置按钮"/>
			<input type="submit" value="提交按钮"/>
			<input type="image" src="img/bg.jpg"/>
			<br>
			<label>button按钮：</label>
			<button type="button"> 普通按钮</button>
			<button type="submit">提交按钮</button>
			<button type="reset">重置按钮</button>
		</form>
	</body>
</html>

说酒话的猫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
02-表单、input、常用字符实体

目录1.表单标签2.input3.表单元素（1）textarea：文本域（2）label：标签（3）button：按钮（4）select：下拉列表4.常用字符实体5.实例1.表单标签 <form>标签用于为用户输入创建HTML表单。表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等，还可以包含textarea等元素。表单用于向服务器传输数据。form元素是块级元素，其前后会产生折行。...
复制链接

扫一扫

专栏目录