HTML学习记录二:html标签（四）：表单控件

一、控件的作用

一般是用来收集用户输入的信息。

二、input控件

<input 	type="这里的值来确定这个控件是什么"/>

type的值	作用
text	表示控件为单行文本框
password	表示控件为密码输入框,输入的值都显示为········
radio	表示控件为单项按钮
checkbox	表示控件为多选按钮
button	表示控件为普通按钮
submit	表示控件为提交按钮，在表单中使用较多
reset	表示控件为重置按钮
image	表示控件为图像形式 的按钮
hidden	表示隐藏域，隐藏控件
file	表示文件域,用来上传文件
h5新增	作用
url	网址控件
date	时间控件
email	邮件控件
number	数字控件，step属性每次增加的数值
range	(滑块属性)也有step属性

H5新增type的值	作用
email	限制用户输入必须为Email类型
url	限制用户输入必须为URL类型
date	限制用户输入必须为日期类型
time	限制用户输入必须为时间类型
month	限制用户输入必须为月类型
week	限制用户输入必须为周类型
number	限制用户输入必须为数字类型
tel	手机号码
search	搜索框
color	生成一个颜色选择表单

控件的属性	作用
maxlength=“x”	表示只能输入x位字符，这是html自带的限制文字输入，以后用JS来控制
readonly=“readonly”	只读属性。不可修改
disabled=“disabled”	输入框未激活和只读差不多都不能输入
name=“自己起名”	表示控件的名称，用来给action区分是那个控件提交的信息
value=“自己设置”	默认值
checked = “checked”	选择控件中使用定义为选中
placeholder	控件的提示信息，占位的
required	表示此控件是必须要输入值的，不输入值点提交会出现提示信息

H5新增控件的属性	值	作用
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	placeholder	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off /on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如 autocomplete=“on”，关闭 autocomplete ="off"需要放在表单内，同时加上 name 属性，同时成功提交
multiple	multiple	可以多选文件提交

1. name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
2. name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.
3. checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
4. maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.
5. radio (或者checkbox）如果是一组，我们必须给他们命名相同的名字

三、下拉列表控件

<select >

<optgroup  lable（分组名称）="自己起名">
<!--对下拉选项进行分组，此标签里的option都属于lable名里的-->
<!-- 下拉列表中的选项，有多个-->
<option></option>
<option></option>
<option></option>
</optgroup>
</seclect>

1. 中至少包含一对 。
2. 在 中定义 selected =“ selected " 时，当前项即为默认选中项。

四、多行文本框控件

<textarea   cols="控制字符的长度"
	     rows="控制自己的行数">
	    <!-- 2字符等于一个汉字 -->
</textarea>

1. 通过 标签可以轻松地创建多行文本输入框。
2. cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小

五、控件的一些操作

1.input控件边框去除：

     要改控件的边框要先去框线和轮廓线，都写在控件的style属性里。
边框去掉

 <input type="text" style="border:none;"/>

2.input控件轮廓线去掉

 <input type="text" style="border:none;outline: none"/>

3.点击标签，使控件获取焦点

      使用<lable>标签，<label for=“控件的ID名”>用户名（这样写鼠标移到用户名上时，跟随的文本框也会变换），点击控件前面的字就能激活标签，获取光标焦点。Id只能写对应控件Id。

4.表单元素想刚打开页面就默认显示几个文字

可以给这些表单元素设置 value 属性=“值

用户名: <input type="text" value="请输入用户名" />

5. 如果页面一打开就让某个单选按钮或者复选框是选中状态

checked 属性：表示默认选中状态。用于单选按钮和复选按钮。

性 别: <input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女

6.修改placeholder里面的字体颜色：

input::placeholder {
 color: pink;
 }