2、input元素及属性

属性 值 描述
accept mime_type 规定通过文件上传来提交的文件的类型。
align
- left
- right
- top
- middle
- bottom
 不赞成使用。规定图像输入的对齐方式。
alt text 定义图像输入的替代文本。
autocomplete
- on
- off
 规定是否使用输入字段的自动完成功能。
autofocus autofocus 规定输入字段在页面加载时是否获得焦点。
（不适用于 type=”hidden”）
checked checked 规定此 input 元素首次加载时应当被选中。
disabled disabled 当 input 元素加载时禁用此元素。
form formname 规定输入字段所属的一个或多个表单。
formaction URL 覆盖表单的 action 属性。
（适用于 type=”submit” 和 type=”image”）
formenctype 见注释 覆盖表单的 enctype 属性。
（适用于 type=”submit” 和 type=”image”）
formmethod
- get
- post
 覆盖表单的 method 属性。
（适用于 type=”submit” 和 type=”image”）
formnovalidate formnovalidate 覆盖表单的 novalidate 属性。
如果使用该属性，则提交表单时不进行验证。
formtarget
- blank
- _self
- _parent
- _top
- _framename
 覆盖表单的 target 属性。
（适用于 type=”submit” 和 type=”image”）
height
- pixels
- %
 定义 input 字段的高度。（适用于 type=”image”）
list datalist-id 引用包含输入字段的预定义选项的 datalist 。
max
- number
- date
 规定输入字段的最大值。
请与 “min” 属性配合使用，来创建合法值的范围。
maxlength number 规定输入字段中的字符的最大长度。
min
- number
- date
 规定输入字段的最小值。
请与 “max” 属性配合使用，来创建合法值的范围。
multiple multiple 如果使用该属性，则允许一个以上的值。
name field_name 定义 input 元素的名称。
pattern regexp_pattern 规定输入字段的值的模式或格式。
例如 pattern=”[0-9]” 表示输入值必须是 0 与 9 之间的数字。
placeholder text 规定帮助用户填写输入字段的提示。
readonly readonly 规定输入字段为只读。
required required 指示输入字段的值是必需的。
size number_of_char 定义输入字段的宽度。
src URL 定义以提交按钮形式显示的图像的 URL。
step number 规定输入字的的合法数字间隔。
type
- button
- checkbox
- file
- hidden
- image
- password
- radio
- reset
- submit
- text
 规定 input 元素的类型。
value value 规定 input 元素的值。
width
- pixels
- %
 定义 input 字段的宽度。（适用于 type=”image”）

2.1 标签

基本语法：

功能：
定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5. </head>
  6. <body>
  7.     姓名：<input type="text" value="小李" />
  8. </body>
  9. </html>

7.2 input元素及属性 - 图1
代码讲解：
image.png

2.1.1 输入类型：password

基本语法：

功能：
定义密码字段。该字段中的字符被掩码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    密码：<input type="password" value="123456" />
</body>
</html>

7.2 input元素及属性 - 图3
代码讲解：
image.png

2.1.2 单选按钮radio

基本语法：
男
女
功能：
定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。
注：单选按钮 radio，必须有name 属性并且 name 必须保持一致。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    性 别：
    <input type="radio" name="sex" checked="checked" />男
    <input type="radio" name="sex" />女
</body>
</html>

7.2 input元素及属性 - 图5
代码讲解：
image.png

2.1.3 复选框checkbox

基本语法：

功能：
定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    爱好：
    <input type="checkbox" name="hobbey" checked="checked" />足球
    <input type="checkbox" name="hobbey" />篮球
    <input type="checkbox" name="hobbey" />羽毛球
    <input type="checkbox" name="hobbey" checked="checked" />乒乓球
</body>
</html>

7.2 input元素及属性 - 图7
代码讲解：
image.png

2.1.4 点击按钮button

基本语法：

功能：
定义可点击的按钮，但没有任何行为。button 类型常用于在用户点击。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    点击按钮：
    <input type="button" value="按钮" />
</body>
</html>

7.2 input元素及属性 - 图9
代码讲解：
image.png

2.1.5 重置按钮reset

基本语法：

功能：
定义重置按钮。重置按钮会清除表单中的所有数据。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    <form action="" method="get">
        姓名：<input type="text" value="小李" /><br />
        点击按钮：<input type="reset" />
    </form>

</body>
</html>

7.2 input元素及属性 - 图11
代码讲解：
image.png

2.1.6 提交按钮subimit

基本语法：

功能：
定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    <form action="" method="get">
        姓名：<input type="text" value="小李" /><br />
        点击按钮：<input type="submit" />
    </form>

</body>
</html>

7.2 input元素及属性 - 图13
代码讲解：
image.png

2.1.7 文件上传file

基本语法：

功能：
用于文件上传

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    头像：<input type="file" name="shangchuan" />

</body>
</html>

7.2 input元素及属性 - 图15
代码讲解：
image.png