<input> 元素的输入类型
大家学习了表单之后,有木有发现input通过定义不同的type属性,描述不同的输入类型。今天小编带大家总结一下input常用的输入类型。
1.文本输入
设置 type 属性值为 'text'
<input type="text">
文本输入框
2.密码输入
设置 type 属性值为 ‘password’
<input type="password">
密码输入框
3.提交表单按钮
设置 type 属性值为 ‘submit’
<input type="submit">
定义提交表单数据至表单处理程序的按钮
4.单选按钮
设置 type 属性值为 ‘radio’
<input type="radio">true
单选按钮
5.复选框
设置 type 属性值为 ‘checkbox’
<input type="checkbox">
6.按钮
设置 type 属性值为 ‘button’
<input type="button" value="确定">
<input>元素输入属性
在讲input的输入属性之前,给大家讲讲HTML属性是怎么回事。
可能大家也发现了,之前文章讲得的HTML中,好多加了属性的元素,例如a标签中加了href属性定义了链接的地址,还有table中加border属性给表格添加边框线。
<a href="https://www.toutiao.com/i6491189339890909709/">sublime的安装与使用</a>
<table border="1"></table>
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现,比如:name="value"。属性总是在 HTML 元素的开始标签中规定。
虽然属性和属性值对大小写不敏感,但是小编还是建议大家用小写的。
后续课程CSS会用到属性给大家总结一下:
class 规定元素的类名
id 规定元素的唯一 id
style 规定元素的行内样式
好啦,我们开始学习input的输入属性。
看如下例子,
<input type="text" value="John">
type属性定义了文本的输入类型,value属性定义了输入字段的初始值。
设置默认值
用value设置初始值往往在你修改输入值时遇到麻烦,如果不提前把初始值删掉的话,你输入新值后跟在初始值后边。
修改输入值
为了解决这个问题,我们可以使用占位符(placeholder)
<input type="text" placeholder="John" >
当你输入新值时,初始值会消失。
使用占位符
readonly 属性
readonly 属性规定输入字段为只读(不能修改)
<input type="text" value="Sunshin" readonly>
disabled 属性
disabled 属性规定输入字段是禁用的。
被禁用的元素是不可用和不可点击的。
被禁用的元素不会被提交。
<input type="text" value="Sunshin" disabled >
输入框不可用
required 属性
required 属性是布尔属性。如果设置,则规定在提交表单之前必须填写输入字段。
<input type="text" value="Sunshin" required>
今天内容是不是又有点多呢?我控制不住我自己啊(⊙o⊙)…
打开编辑器好好练习一下吧!
你必须非常努力,才能看起来好不费力!
关注小白前端,才能持续收到文章推送哦~