Html中form标签的使用

最新推荐文章于 2023-05-09 17:47:45 发布

酱橙C

最新推荐文章于 2023-05-09 17:47:45 发布

阅读量7.2k

点赞数 18

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_41982039/article/details/105150338

版权

本文介绍了HTML中form标签的使用，包括form表单的常见属性及其在实际操作中的应用，如用户输入、选择等。并提供了练习和效果展示。

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

当需要向服务器提交数据时，我们一般会选择使用form表单来实现数据的提交。

<form>标签用来表示一个需要向服务器提交的数据表单，在这个form表单的子标签里，需要实现让用户输入、单选、多选(input标签)，下拉选择(select标签)，点击(button标签或者input标签)，输入大段文字(textarea标签)等操作。

一.form标签的使用

<form action="http://www.baidu.com" method="post">
    <!-- 在这里放入input/select/textarea等子标签，用来让用户输入内容 -->
</form>

常见属性

属性名	取值	含义
action	url	表示当点击提交按钮时，form表单里的数据要提交到的服务器地址
method	get或post	表示向服务器提交数据时的方式，支持get和post提交，默认提交方式是get

二. form表单的常见属性

属性名	取值	含义
type	text	默认值，显示一个普通的文本输入框
	button	显示一个普通按钮
	submit	显示一个提交按钮，点击时，会提交所在form表单里的数据
	image	根据src属性指定的图片路径，加载显示一张图片，作为提交按钮
	reset	显示一个重置按钮，点击时，会重置所在form表单里的数据
	radio	显示一个单选框，多个相关联的单选框name属性值要一样，否则无法实现多选
	checkbox	显示一个复选框
	file	显示一个文件按钮，点击时可以选择电脑上的文件
	password	显示一个密码输入框，当用户输入时，会显示成为密文
	number	显示一个输入框，用户只能输入数字、正负号和字母e,其他非数字无法输入
	email	显示一个文本输入框，用户输入的内容要符合电子邮箱地址，否则点击提交按钮时会出现错误提示，无法提交数据
	tel	控制用户输入手机号，当用户使用手机访问网页，点击文本框时，会弹出拨号键盘
name	任意文本	设置input的名称，当提交给服务器时，会作为key提交
value	任意文本	当提交给服务器时，会作为value提交当input为文本输入框时，设置文本输入框上的内容；当input为按钮时，用来设置按钮上的显示文字
checked	checkeck或者不设置	当type为radio或者checkbox时，用来设置默认选中
autofocus	autofocus或者不设置	设置当打开页面时，文本输入框是否自动获取焦点
autocomplete	autocomplete或者不设置	设置是否自动补全，注意，只有input标签设置了name属性以后，autocomplete才有效
required	required或不设置	表示该输入框必须要填写，否则无法提交
readonly	readonly或不设置	表示该输入框里的数据不可修改
disabled	disabled或不设置	表示禁用文本输入框，多用于按钮
max/min	数字	当type为number时，用来设置最大值和最小值区间
placeholder	任意文本	当input的类型为输入框时，用来在输入框中显示提示信息

三 .form表单的练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

最低0.47元/天解锁文章

酱橙C

关注

18
点赞
踩
162

收藏

觉得还不错? 一键收藏
0
评论
Html中form标签的使用

当需要向服务器提交数据时，我们一般会选择使用form表单来实现数据的提交。<form>标签用来表示一个需要向服务器提交的数据表单，在这个form表单的子标签里，需要实现让用户输入、单选、多选(input标签)，下拉选择(select标签)，点击(button标签或者input标签)，输入大段文字(textarea标签)等操作。一.form标签的使用<form action...
复制链接

扫一扫

专栏目录