HTML基础学习 十

HTML 表单元素和输入

第一个最重要的是<input>元素

如：

<select name="cars"><option value="hyn1">hyn1</option><option value="hyn2">hyn2</option><option value="hyn3">hyn3</option><option value="hyn4">hyn4</option></select>

<textarea> 元素

<textarea> 元素定义多行输入字段（文本域）：

实例

<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>

<button> 元素

<button> 元素定义可点击的按钮：

实例

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Input Type: checkbox

<input type="checkbox"> 定义复选框。

复选框允许用户在有限数量的选项中选择零个或多个选项。

实例

<form><input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form> 

输入类型：number

<input type="number"> 用于应该包含数字值的输入字段。

您能够对数字做出限制。

根据浏览器支持，限制可应用到输入字段。

实例

<form>  Quantity (between 1 and 5):  <input type="number" name="quantity" min="1" max="5"></form>

输入限制

这里列出了一些常用的输入限制（其中一些是 HTML5 中新增的）：

属性描述disabled规定输入字段应该被禁用。max规定输入字段的最大值。maxlength规定输入字段的最大字符数。min规定输入字段的最小值。pattern规定通过其检查输入值的正则表达式。readonly规定输入字段为只读（无法修改）。required规定输入字段是必需的（必需填写）。size规定输入字段的宽度（以字符计）。step规定输入字段的合法数字间隔。value规定输入字段的默认值。

readonly 属性

readonly 属性规定输入字段为只读（不能修改）：

实例

<form action=""> First name:<br><input type="text" name="firstname" value="John" readonly><br> Last name:<br><input type="text" name="lastname"></form> 

disabled 属性

disabled 属性规定输入字段是禁用的。

被禁用的元素是不可用和不可点击的。

被禁用的元素不会被提交。

实例

<form action=""> First name:<br><input type="text" name="firstname" value="John" disabled><br> Last name:<br><input type="text" name="lastname"></form> 

size 属性

size 属性规定输入字段的尺寸（以字符计）：

实例

<form action=""> First name:<br><input type="text" name="firstname" value="John" size="40"><br> Last name:<br><input type="text" name="lastname"></form> 

maxlength 属性

maxlength 属性规定输入字段允许的最大长度：

实例

<form action=""> First name:<br><input type="text" name="firstname" maxlength="10"><br> Last name:<br><input type="text" name="lastname"></form> 

注意：

如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。

该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码。

注释：输入限制并非万无一失。JavaScript 提供了很多方法来增加非法输入。如需安全地限制输入，则接受者（服务器）必须同时对限制进行检查。