HTML表单元素简介

最新推荐文章于 2022-06-03 10:31:53 发布

H之一

最新推荐文章于 2022-06-03 10:31:53 发布

阅读量1.1k

点赞数 6

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

本文链接：https://blog.csdn.net/H_zhiyi/article/details/108150338

版权

前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

HTML

11 篇文章 1 订阅

订阅专栏

1表单元素

input 文本框/密码框/单选按钮/复选框…
1.1文本框<input type=”text” name=”username” value=”初始值”></input>
属性type=”text”–表示文本框
属性name=”username”—告诉后台处理程序文本框中输入的数据值
属性value=”初始值”-------初始值
1.2密码框<input type=”password” name=”password” value=”初始密码”></input>
属性type=”password”–表示密码
属性name=”password”—告诉后台处理程序密码框中输入的数据值
属性value=”初始密码”------初始密码
1.3单选按钮<input type=“radio” name=”sex” value=”man”/>[预设值]
属性type=”radio”–表示单选按钮
属性name=”sex”—告诉后台处理程序被选中的单选按钮选
属性value=”nam”------真实数据
属性checked=“checked”—默认被选中
多个单选按钮属于同一组—设置name属性值相同
1.4复选框<input type=“checkbox” name=”test1” value=”val”/>[预设值]
属性type=”checkbox”–表示复选框
属性name=”test1”—告诉后台处理程序被选中的复选框选
属性value=”val”------真实数据
属性checked=“checked”—默认被选中
多个复选框属于同一组—设置name属性值相同
1.5文件选择框<input type=“file” name=”file” />
属性type=”file”–表示文件选择框
属性name=”file”—告诉后台处理程序文件选择框
1.6颜色选择框<input type=“color” name=”mycolor” />
属性type=”color”–表示颜色选择框
属性name=”file”—告诉后台处理程序颜色选择框
1.7日期选择框<input type=“date” name=”mydate” />
属性type=”date”–表示日期选择框
属性name=”mydate”—告诉后台处理程序日期选择框
1.8 邮箱输入框<input type=“email” name=”myemail” />
属性type=”email”–表示邮箱输入框
属性name=”myemail”—告诉后台处理程序邮箱输入框
1.9 隐藏域<input type=“hidden” name=“myhidden” value=””>
属性type=”hidden”–表示隐藏域
属性name=”myhidden”—告诉后台处理程序隐藏域
属性value=”val”------真实数据
按钮
普通按钮<input type=“button” name=“mybutton” value=”按钮”>
属性type=”button”–表示普通按钮
属性value=”按钮”------显示在按钮上的文本内容
表单提交按钮<input type=“submit” name=“mysubmit” value=”提交”>
属性type=”button”–表示表单提交按钮
属性value=”按钮”------显示在按钮上的文本内容
注意:表单提交按钮出现在form表单中才会提交表单数据。
表单重置按钮<input type=“reset” name=“myreset” value=”重置”>
属性type=”reset”–表单重置按钮
属性value=”按钮”------显示在按钮上的文本内容
注意:表单重置按钮出现在form表单中才会重置表单数据。
2. seletc 下拉列表
例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select name="sel">
			<option value ="xz">--选择--</option>
			<option value ="xa">--西安--</option>
			<option value ="sh">--上海--</option>
			<option value ="bj">--北京--</option>
			<option value ="gz">--广州--</option>
		</select>
	</body>
</html>

在这里插入图片描述
seletc–下拉列表
属性name=”select”—告诉后台处理程序下拉列表
option—表示下拉列表的每一项
属性value=“xa”—提交给后台处理程序的真实数据值
属性 selected=“selected”–默认被选中
3. textarea 文本域—富文本编辑器
在这里插入图片描述
例如：
<textarea cols=“50” rows=“5”></textarea>
属性cols列数设置文本域的宽度
属性cols行数设置文本域的高度

背景颜色—bgcolor—body—单词/颜色码—设置的是整个页面的背景色
背景图片
background属性将背景设置为图像
设置位置body元素—设置的是整个页面的背景图片
background属性的取值

绝对路径/相对路径
网络地址【url】
如果这个图像的大小不及浏览器窗口，它将平铺占满窗口。

div–html中的层
—表示在html页面中的一块空白区域，这一块空白区域中可以编辑其他的元素。
通常要与CSS[层叠样式表]一起使用才能有实际的意义。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 600px;
				height: 600px;
				background-color: red;
			}
		</style>
	</head>
	<body>
	<div>
		<img src="imgs/13.jpg" >
		
	</div>
	</body>
</html>

在这里插入图片描述

H之一

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
HTML表单元素简介

1表单元素input 文本框/密码框/单选按钮/复选框…1.1文本框<input type=”text” name=”username” value=”初始值”></input>属性type=”text”–表示文本框属性name=”username”—告诉后台处理程序文本框中输入的数据值属性value=”初始值”-------初始值1.2密码框<input type=”password” name=”password” value=”初始密码”></
复制链接

扫一扫

专栏目录