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>