表单
1.表单元素
表单区域--form
作用:
定义HTML表单域,是一个包含表单元素的区域.
2.属性
action属性
action="数据提交地址" 注意:如果省略 action 属性,则action被设置为当前页面
作用:把数据提交到后台或者服务器
注意:如果省略action属性,则会被设置为当前页面
target属性
作用:设置目标地址的打开方式
取值:_self当前窗口
_blank新窗口
method
作用:method:GET/POST提交表单时所用的HTTP方法,默认是GET方法
取值:
get 方法:将表单中数据的按照 variable=value 的形式,添加到 action 所指向的【 URL 后面,并且两者使用“?”连接】,而各个变量之间使用“&”连接。(通过地址栏提交)
post方法:将表单中的【数据放在 form 的数据体】中,按照变量和值相对应的方式,传递到 action 所指向 URL。将数据隐藏在http数据流中传输(通过后台提交)
input表单控件
表单元素是允许用户在表单中输入内容的标签,比如:文本域,下拉列表,单选框,复选框
概述:input是最重要的表单元素.type属性取值不同,可以展示不同的表单样式
作用:用来定义不同种类的输入控件
语法:
<input type="text" name="" value=""> type属性:表示不同类型的表单控件 name属性:表单的字段名,如果不设置name属性,输入框的内容无法随表单一起提交 value属性:规定输入字段的初始值
常用类型
1.type="text"
作用:用于文本输入的单行输入字段
<input type="text" placeholder="请输入账号"> type='text' placeholder:提示信息
2.type="password"
作用:定义密码字段
默认掩码处理
<input type="password" value="密码">
3.type="radio"
作用:定义单选按钮,允许用户在有限数量的选项中选择其中之一(需要指定单选按钮)
<input type="radio"> <input type="radio" name="" value=""> name属性:可以实现单选框的互斥效果,name设置的属性值要一样,即选男不能选女,选女不能选男 value属性:必不可少的,表示选项代表的值
4.type="checkbox"
作用:定义复选框,允许用户在有限数量的选项中选择0个或多个选项
<input type="checkbox"> <input type="checkbox" name="" value=""> name属性:name设置的属性值要一样,实现多个选项保存在同一个字段中 value属性:必不可少的,表示选项代表的值 checked:用于单选框按钮和复选框按钮的默认选中,直接在input标签写checked或checked='checked'
5.type="submit"
作用:定义用于向表单处理程序提交表单的按钮
注意:省略了提交value属性,该按钮将显示默认文本"提交"(不同浏览器表现不同)
<input type="submit" value="提交按钮">
6.type="button"
作用:定义普通按钮
提示:不能提交文字,默认没有文字
value属性:定义普通按钮的文字
<input type="button" value="按钮">
7.type="reset"
作用:清除表单控件的输入信息
value属性:定义普通按钮的文字
8.type="reset"
作用:清除表单控件的输入信息
value属性:修改按钮的文字,默认是重置
<input type="reset" value="重置">
9.type="image"
作用:定义图像形式的提交按钮
属性:
src="': 指定图片地址
alt="":指定替换文本
提示:提示:src 属性和alt 属性必须与 <input type="image"> 结合使用,一般不建议使用
width:设置宽
height:设置高
<input type="image" src="./images/4.jpg" alt="图片" width="100" height="200">
10.type="file"
作用:用于文件上传
注意:要实现文件的上传,必须在form标签中添加enctype="multipart/form-data"
<input type="file">
textarea标签
作用:用于留言板等需要输入大量类名
语法:
<textarea>初始值</texarea>
注意:不能够使用value属性规定他的初始值,初始值在开始和结束标签中设置
<textarea name="" id="" cols="30" rows="10">我是一个文本框</textarea> resize: none禁止用户手动调整多行文本域的大小 cols属性是表示宽度 rows属性是表示行数
select属性
概述:
select标签用于定义下拉列表,下拉列表通过option标签定义选项
语法:
下拉列表 <select name=""size="2"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="天津">天津</option> </select> option:列表项 value属性:必不可少的,表示选项代表的值 selected:下拉列表的默认选中,直接在option标签中写即可,selected或者selected='selected' size属性:控件长度,规定下拉列表中可见选项的数目
表单元素标注
为input元素定义标注
通过<label>标签的for属性值与相关元素的id值相同,绑定表单元素
作用:是扩大点击范围,提高用户体验
一般与单选按钮或者复选框组合使用
语法
<label for="id名"></label>
效果描述
当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件中
<input type="radio" id="man1" name="man" value="男"> <label for="man1">男</label> <input type="checkbox" name="" id="woman" value="女"> <label for="woman">女</label> <label for="man"> <input type="radio" name="sex" value="男" checked id="man">男 </label>
表单属性
1、action 属性定义在提交表单时执行的动作。通常,表单会被提交到 web 服务器上的网页。如果省略 action 属性,则 action 会被设置为当前页面。 2、method="GET/POST":提交表单时所用的HTTP方法,默认是GET方法 3、checked:用于单选框按钮和复选框按钮的默认选中,直接在input标签写checked或checked='checked' 4、selected:下拉列表的默认选中,直接在option标签中写即可,selected或者selected='selected' 5、value属性:规定输入字段的初始值。 6、readonly属性:只读属性,只能读,不能修改 7、disabled属性:禁用属性,表示元素不可用,不可以点击 8、maxlength属性:允许输入的最多字符 9、size属性:控件长度,规定下拉列表中可见选项的数目 10、placeholder 提示用户输入信息
文本框和按钮不对齐现象
input设置左浮动
因为按钮的高度比input的高度大2px
垂直对齐:按钮设置高度比文本框的高度大2px
左右对齐:文本框和按钮设置浮动
input { /* 左右对齐 */ float: left; } .sub { /* 垂直对齐 */ /* 按钮的高度比文本框的高度大2px */ height: 21px; } ------------------------------------------------------------------------------- input { /* 左右对齐 */ float: left; height: 50px; } .sub { /* 垂直对齐 */ /* 文本框和按钮的高度要一样 */ height: 56px; } 结构: <input type="text" placeholder="text"> <input type="submit" class="sub"> <input type="button" class="sub" value="普通按钮"> <input type="reset" class="sub">
css用户页面属性
轮廓线
概述:轮廓是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用
轮廓属性指定元素轮廓的样式,颜色和宽度
outline简写
在一个声明中设置所有的轮廓属性
可以设置的属性分别是(按顺序)
outline-color outline-style outline-width
说明:
轮廓样式 outline-style
轮廓颜色 outline-color
轮廓宽度 outline-width
取值:参考边框
清除设置input ,textarea的轮廓线
input, textarea { /* 清除轮廓线 */ outline: none; /* 设置轮廓线 */ outline: 1px solid red; }
用户界面
文本域的resize属性:用户是否可以对元素尺寸进行调整
默认值 auto
default 通常是一个箭头
text 显示为光标
pointer 光标呈现为指示链接的指针(一只手)
move 此光标指示某对象可被移动
其他值
e-resize 此光标指示矩形框的边缘可被向右(东)移动。 ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。 nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。 n-resize 此光标指示矩形框的边缘可被向上(北)移动。 se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。 sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。 s-resize 此光标指示矩形框的边缘可被向下移动(南)。 w-resize 此光标指示矩形框的边缘可被向左移动(西)。 text 此光标指示文本。 wait 此光标指示程序正忙(通常是一只表或沙漏)。 help 此光标指示可用的帮助(通常是一个问号或一个气球)