html-表单

<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>