HTML表单标签及表单标签属性

最新推荐文章于 2024-05-14 22:39:54 发布

ginger_mr

最新推荐文章于 2024-05-14 22:39:54 发布

阅读量2.3k

点赞数 7

分类专栏： Html

本文链接：https://blog.csdn.net/qq_40332952/article/details/103939641

版权

Html 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

表单标签以及属性介绍

   属性介绍:
           form标签属性
                   action:请求路径。
                   method:请求方式。

get:默认值

提交的数据追加在请求路径上。数据格式k/v,追加是使用?连接之后每一对数据使用&连接。
因为请求路径长度有限，所有GET请求提交的数据有限。

post:

提交的数据不再请求路径上追加(及不显示在地址栏上)
提交的数据大小不显示。

input标签属性:
inpug标签用于获得用户输入信息,type属性值不同,搜集方式不同。最常使用的标签。

type属性中的取值

text:文本框,单行的输入字段,用户可在其中输入文本,默认宽度为20个字符。

password：密码框。

radio:单选框。单选框要加上属性name表示是一个组的，属性中的值要一样，这样才会是单选框的效果。如果想自动选中加上属性checked。

submit:提交按钮。提交表单，提交到action指定的路径。

checkbox复选框。

file:文件上传组件,提供"浏览"按下可以选择需要上传的文件。

hidden：隐藏字段。数据还会发送给服务器，但浏览器不进行显示。

reset:重置按钮。将表单恢复到默认值。

image :图形提交按钮,常用于与JavaScript结合使用。

name属性：

如果需要表单数据提交到服务器，必须提供name属性值，服务器通过属性值获得提交数据。

value属性:

设置input标签的默认值。submit和reset为按钮显示数据

size属性:大小。

checked属性:单选框和复选框自动选中。

readonly属性:是否只读。

disabled属性:是否可用。

maxlength:允许输入的最大长度。

下拉标签select

name属性:发送给服务器的名称。

multple属性:不写默认单选,取值'multple'表示多选。

size属性：多选时，可见选项的数目。

select标签子标签option标签：

selected:自动勾选当前列表。

value：发送给服务器的取值。

文本域标签textarea

clos属性:文本域的列数。

rows:文本域的行数

按钮标签button

<button type="button|reset|submit">按钮标签一般很少使用,提供"普通|重置|提交"功能,不同的浏览器默认值也不同。
注意
复选框、单选框以及下拉框,其中的属性name不是提交到后台的键值,属性name的作用是分组,表示是一个组的,
提交的键值是value属性。其他的name属性则是提交到后台的键值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单标签以及表单属性介绍</title>
	</head>
	<body>
		<form action="#" method="get">
			用户名:<input type="text" name="username" readonly="readonly" value="xxxx" size="" 
				  maxlength="" placeholder="请输入用户名"/><br/>
			密码:<input type="text"  name="password"/><br/>
			确认密码:<input type="text"  name="repassword"/><br/>
			<!--单选框-->
			性别:<input type="radio" name="sex" value="男" checked="checked"/>男
				<input type="radio" name="sex" value="女"/>女<br/>
			<!--多选框-->
			爱好:<input type="checkbox" name="hobby" value="篮球" checked="checked"/>篮球
				<input type="checkbox" name="hobby" value="打电动"/>打电动
				<input type="checkbox" name/="hobby" value="看电影">看电影<br/>
			头像:<input type="file" name="file"/><br/>
			<!--下拉框-->
			籍贯:<select name="province">
					<option>--请选择--</option>
					<option value="上海">上海</option>
					<option value="北京" selected="selected">北京</option>
					<option value="广州">广州</option>
			</select><br/>
			自我介绍:<textarea anme=""></textarea><br/>
			提交按钮:<input type="submit" value="提交注册"/><br/>
			普通按钮:<input type="button" value="提交" /><br/>
			重置按钮:<input type="reset" value="重置按钮" />
			
		</form>
	</body>
</html>

页面展示

ginger_mr

关注

7
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
HTML表单标签及表单标签属性

表单标签以及属性介绍属性介绍: form标签属性 action:请求路径。 method:请求方式。 get:默认值提交的数据追加在请求路径上。数据格式k/v,追加是使用?连接之后每一对数据使用&连接。因为请...
复制链接

扫一扫