HTML表单元素简介

11 篇文章 1 订阅

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属性的取值

  1. 绝对路径/相对路径
  2. 网络地址【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>

在这里插入图片描述

  • 6
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值