form表单

最新推荐文章于 2023-01-02 20:38:14 发布

世林木木

最新推荐文章于 2023-01-02 20:38:14 发布

阅读量182

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_49123737/article/details/117380312

版权

本文详细介绍了HTML表单的使用，包括form表单的action和method属性，以及input元素的各种类型如text、password、checkbox等。还讨论了input的name、id、value等属性，以及select下拉框和textarea多行文本框的用法。此外，文章通过实例展示了如何创建交互式表单，包括按钮、文件上传、日期选择和数字输入等功能。

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

HTML 表单用于搜集不同类型的用户输入。

1.form表单的属性

1.1action属性

action属性是表单提交数据时发送到的地址，用于跳转，要结合input 提交按钮使用

action=“跳转地址”

1.2 method属性

用于规定表单提交数据时用的http请求方法

一般有get和post两个取值，默认取值为get

两者都是让后台接收到提交的数据，但是两者也又区别

get 请求会在地址栏暴露出提交的信息，是不安全的

post请求不会暴露信息，是安全的。

2.form表单的元素

2.1input元素

input元素是表单标签中使用最多的元素，他会根据type属性值的不同，改变成不同的形态

取值	描述
text	定义单行的输入字段，用户可在其中输入文本。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
checkbox	定义多选按钮。
button	定义普通按钮。
file	定义文本域，可以选择要上传的文件
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
image	定义图片按钮。将一张图片作为按钮。
hidden	定义隐藏域。不会在界面显示，一般不建议使用。
email	定义邮箱框。在文本框中输入邮箱
date	定义时间显示框。
datetime-local	定义本地时钟。
color	定义颜色选择域。
number	定义数字框，可以定义最大最小值
range	定义进度条。

input元素的一些其他属性

属性	描述
name	元素的名称
id	元素的唯一标识符
value	元素的值
checked	元素是否被选中
readonly	输入的字段是只读的，不可以被修改
disabled	禁用input，被禁用的input是不可用的，也不可以点击
required	在提交表单时，如果为空，会有相应提示
autofocus	当页面打开时，会自动获取光标

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>form</title>
</head>
<body>
	<form>
		<input type="text" name="user" value="文本框"><br/>
		只读：<input type="text" name="use" value="另外一个文本框" readonly="readonly"><br/>
		禁用：<input type="text" name="us" value="又是一个文本框" disabled="disabled"><br/>
		自动获取光标:<input type="text" name="u" value="还是一个文本框" autofocus><br/>
		密码框：<input type="password" name="password" value="密码框"><br/>
		单选按钮：<input type="radio" name="gender" value="男" checked="checked">男
		<input type="radio" name="gender" value="女">女<br/>
		多选按钮：<input type="checkbox" name="hobby" value="篮球">篮球
		<input type="checkbox" name="hobby" value="LoL">LOL<br/>
		<input type="button" name="anniu" value="普通按钮">
		<input type="submit" name="submit" value="提交">
		<input type="reset" name="reset" value="重置">
		<input type="file" name="file"><br/>
		<hr>
		邮箱框：<input type="email" name="email" placeholder="请输入邮箱"><br/>
		日期：<input type="date" name="date"><br/>
		时间：<input type="time" name="time"><br/>
		本地时间：<input type="datetime-local" name="time"><br/>
		数字框：<input type="number" name="number" min="1" max="10"><br/>
		进度条：<input type="range" name="range"><br/>
	</form>
</body>
</html>

2.2select下拉框标签

select用来定义一个下拉框下拉框的选项用<option></option>来规定

select的属性

属性	描述
mutiple	规定可选择多个选项。
size	规定下拉列表中可见选项的数目。
selected	在option中使用可以设置默认选中的值

<select multiple="multiple">
	<option>重庆</option>
	<option>江苏</option>
	<option>甘肃</option>
</select>

2.3textarea标签

定义一个多行文本框

属性

属性	描述
cols	设置多行文本框的宽度
rows	设置多行文本框的高度
palceholder	设置多行文本框输入之前的提示

<textarea cols="20" rows="5" placeholder="请输入您的建议"></textarea>

世林木木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫