前端开发（表单标签）

最新推荐文章于 2024-08-09 15:13:41 发布

不言尘世

最新推荐文章于 2024-08-09 15:13:41 发布

阅读量295

点赞数 1

分类专栏：前端开发文章标签：前端

本文链接：https://blog.csdn.net/weixin_43599377/article/details/95599512

版权

前端开发专栏收录该内容

33 篇文章 2 订阅

订阅专栏

前端开发（表单标签）

表单标签

今天就以代码为主吧，主要是表单的一些属性和用法。

作用：收集数据，用于与服务器交互

<form>
		<input  type=。。。。。。/>
<from>

对于input标签中的type属性：
|text | --------------------------------- |文本框
|password-- ------------------------ |-密码框-|
|-radio-|------------------------------- 单选按钮，应成组使用|
| checkbox ----------------------- — | 复选框，可独立使用 |
file-------------------------------------文件域
hidden-------------------------------隐藏域，相当于一个浏览者看不到的文本框
submit-------------------------------提交按钮，用于表单填写完成，将表单所有数据提交到服务器
reset----------------------------------重置按钮，用于将表单所有数据恢复到初始状态
button--------------------------------自定义命令按钮，没有任何的内置行为，可借助于js交半年来定义其行为
image-------------------------------图像按钮，功能与submit相同，但显示为图像

Input标签属性：
type---------------------------------表示元素的类型
id------------------------------------标签在整个页面中的唯一标示符
name-------------------------------表单元素的名称，只有设置了name属性的表单元素才能参与表单提交，对于一组单选按钮来说，只有将所有的name值设置为相同，才能进行单选
value------------------------------表单元素的值，就是他表示的数据，
size-------------------------------一般用于文本框和密码框，表示宽和高
maxlength----------------------一般用于文本框和密码框，表示他们可以接受的最多字符
checked------------------------只用于单选按钮和复选框，
src-------------------------------只用于图像按钮，设置图像文件的地址，
alt--------------------------------只用于图像按钮，设置图像的替代文字

接下来就是针对以上的属性代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表单标签</title>
	</head>
	<body>
		<!--<form action="表单提交的地址【服务器的url】" method="提交方式（一种是get，一种是post）">
			
		</form>-->
		<form action="" method="get">
			<!--表单元素-->
			<!--输入框-->
			<input type="text" name="标示数据字段" id="表示元素在这个页面中的唯一标示符" value="按钮" />
			<br />
			<!--密码框-->
			<input type="password" name="" id="" value="" />
			<br />
			<!--按钮-->
			<input type="button" name="66" value="1" />
			<br />
			<!--多行输入框-->
			<textarea></textarea>
			<br />
			<!--隐藏域-->
			<input type="hidden" name="" id="" value="" />
			<br />
			<!--html5中的一些兼容性问题,不建议使用-->
			<!--<input type="color" />
			<input type="date" />-->
			<!--按钮类-->
			<h2>按钮类</h2>
			<input type="button" name="" id="" value="按钮" />
			<input type="reset" value="重置按钮" />
			<input type="submit" name="" id="" value="提交" />
			<h2>选框类</h2>
			<!--单选框，要将name设置为一样-->
			单选框
			<input type="radio" name="sex" id="1" value="女" />女
			<input type="radio" name="sex" id="2" value="男" />男
			<br />
			<!--复选框-->
			复选框
			<input type="checkbox" name="" id="1" value="" />篮球
			<input type="checkbox" name="" id="2" value="" />足球
			<input type="checkbox" name="" id="3" value="" />好球
			<br />
		</form>
		
	</body>
</html>

多行文本的标签，直接上代码
属性：cols-------------设置文本域的宽度
rows--------------------设置文本域的高度
warp--------------------设置自动换行模式，有三个值，off，virtual，physical

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>作业2</title>
	</head>
	<body style="background-color: peachpuff;">
		<font size="6" color="brown">申请表</font>
	<form
		
			附注<textarea rows="2" cols="15" name="66">请在这里写入附注</textarea><br /><br />
			
		</form>
	</body>
</html>

select下拉标签
直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>作业2</title>
	</head>
	<body style="background-color: peachpuff;">
		<form action="" method="post">
			国籍&nbsp;&nbsp;<select>
				<option>中&nbsp;&nbsp;&nbsp;&nbsp;国</option>
				<option>贵州</option>
				<option>重庆</option>
				<option>宁夏</option>
			</select><br /><br />
		</form>
	</body>
</html>