HTML学习记录二:html标签(四):表单控件
- 一、控件的作用
- 二、input控件
- 三、下拉列表控件
- 四、多行文本框控件
- 五、控件的一些操作
- 1.input控件边框去除:
- 2.input控件轮廓线去掉
- 3.点击标签,使控件获取焦点
- 4.表单元素想刚打开页面就默认显示几个文字
- 5. 如果页面一打开就让某个单选按钮或者复选框是选中状态
- 6.修改placeholder里面的字体颜色:
一、控件的作用
一般是用来收集用户输入的信息。
二、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 | 可以多选文件提交 |
- name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
- name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.
- checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
- maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.
- radio (或者checkbox)如果是一组,我们必须给他们命名相同的名字
三、下拉列表控件
<select >
<optgroup lable(分组名称)="自己起名">
<!--对下拉选项进行分组,此标签里的option都属于lable名里的-->
<!-- 下拉列表中的选项,有多个-->
<option></option>
<option></option>
<option></option>
</optgroup>
</seclect>
- 中至少包含一对 。
- 在 中定义 selected =“ selected " 时,当前项即为默认选中项。
四、多行文本框控件
<textarea cols="控制字符的长度"
rows="控制自己的行数">
<!-- 2字符等于一个汉字 -->
</textarea>
- 通过 标签可以轻松地创建多行文本输入框。
- 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;
}