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" οnclick="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 提供了很多方法来增加非法输入。如需安全地限制输入,则接受者(服务器)必须同时对限制进行检查。