前端学习笔记之——定制 input 元素

最新推荐文章于 2024-08-02 09:00:00 发布

前丨尘忆·梦

最新推荐文章于 2024-08-02 09:00:00 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/qq_36879493/article/details/118069485

版权

前端专栏收录该内容

28 篇文章 1 订阅

订阅专栏

定制 input 元素

1、用 input 元素输入文字

type 属性设置为 text 的 input 元素在浏览器中显示为一个单行文本框。这是默认形式。下表罗列了可用于这种类型的各种属性：

属性	说明
dirname	指定元素内容文字方向的名称
list	指定为文本框提供建议值的 datalist 元素，其值为 datalist 元素的 id 值
maxlength	设定用户在文本框中输入的字符的最大数目
pattern	指定一个用于输入验证的正则表达式
placeholder	指定关于所需数据类型的提示
readonly	用来将文本框设为只读以阻止用户编辑器内容
required	表明用户需要输入一个值，否则无法通过输入验证
size	通过指定文本框中可见的字符数目设定其宽度
value	设置文本框的初始值

1.1、设置元素大小

有两个属性能够对文本框的大小产生影响。maxlength 属性设定了用户能够输入的字符的最大数目，size 属性则设定了文本框能够显示的字符数目。二者的字符数均以正整数表示。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>        
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="name">
                    Name: <input maxlength="10" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="city">
                    City: <input size="10" id="city" name="city"/>
                </label>
            </p>            
            <p>
                <label for="fave">
                    Fruit: <input size="10" maxlength="10" id="fave" name="fave"/>
                </label>
            </p>
            <button type="submit">Submit Vote</button>
        </form>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z3xXVB9o-1624170218805)(素材/使用maxlength和size属性.png)]

1.2、设置初始值和占位符提示

先前的例子中的文本框在文档载入是都是空的，设计者可以用 value 属性设置一个默认值，还可以用 placeholder 属性设置一段提示文字，告诉用户应该输入什么类型的数据。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>        
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="name">
                    Name: <input placeholder="Your name" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="city">
                    City: <input placeholder="Where you live" id="city" name="city"/>
                </label>
            </p>            
            <p>
                <label for="fave">
                    Fruit: <input value="Apple" id="fave" name="fave"/>
                </label>
            </p>
            <button type="submit">Submit Vote</button>
        </form>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZnL1QVIK-1624170218807)(素材/提供默认值和占位符.png)]

1.3、使用数据列表

可以将 input 元素的 list 属性设置为一个 datalist 元素的 id 属性值，这样用户在文本框中输入数据时只需要从后一元素提供的一批选项中进行选择就可以了。

元素	datalist
元素类型	短语
允许具备的父元素	任何可以包含短语元素的元素
局部属性	无
内容	option 元素和短语内容
标签用法	开始标签和结束标签
习惯样式	无

datalist 元素可以用来提供一批值，以便帮助用户输入需要的数据。不同类型的 input 元素使用 datalist 元素的方式略有差异。对于 text 型 input 元素，datalist 元素提供的值以自动补全建议值的方式呈现。提供给用户选择的值各用一个 option 元素指定。

元素	option
元素类型	短语
允许具备的父元素	datalist、select、optgroup
局部属性	disabled、selected、label 和 value
内容	字符数据
标签用法	虚元素形式，或开始标签与结束标签一起使用
习惯样式	无

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>        
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="name">
                    Name: <input placeholder="Your name" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="city">
                    City: <input placeholder="Where you live" id="city" name="city"/>
                </label>
            </p>            
            <p>
                <label for="fave">
                    Fruit: <input list="fruitlist" id="fave" name="fave"/>
                </label>
            </p>
            <button type="submit">Submit Vote</button>
        </form>
        
        <datalist id="fruitlist">
            <option value="Apples" label="Lovely Apples"/>
            <option value="Oranges">Refreshing Oranges</option>
            <option value="Cherries"/>
        </datalist>

    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5HEs0izd-1624170218808)(素材/搭配使用input和datalist元素.png)]

包含在 datalist 元素中的每一个 option 元素都代表一个供用户选择的值。其 value 属性值在该元素代表的选项被选中时就是 input 元素所用的数据值。显示在选择列表中的未必是 option 元素的 value 属性值，还可以是另行设定的一条说明信息。它可以用 label 属性值设置，也可以作为 option 元素的内容设置。

使用这种 text 型 input 元素时要注意：如果某个 option 元素的内容或 label 值与其 value 值不同的情况。

1.4、生成只读或被禁用的文本框

readonly 和 disabled 属性都可以用来生成用户不能编辑的文本框，其结果的外观不同。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>        
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="name">
                    Name: <input value="Adam" disabled id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="city">
                    City: <input value="Boston" readonly id="city" name="city"/>
                </label>
            </p>            
            <p>
                <label for="fave">
                    Fruit: <input id="fave" name="fave"/>
                </label>
            </p>
            <button type="submit">Submit Vote</button>
        </form>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z14EIUQZ-1624170218808)(素材/使用disabled和readonly属性.png)]

第一个 input 元素设置了 disabled 属性，结果该文本框显示为灰色，而且用户不能编辑其中的文字。第二个 input 元素设置了 readonly 属性，这也会阻止用户编辑文本框中的文字，但不会影响其外观。

设置了 disabled 属性的 input 元素的数据不能被提交到服务器。如果既想要这个属性又想把数据发到服务器，那么应该考虑使用 hidden 型 input 元素。

readonly 谨慎使用。虽然使用这个属性的 input 元素的数据能够发给服务器，但是没有任何视觉信息告诉大家该文本框已被禁止编辑。

2、用 input 元素输入密码

type 属性设置为 password 的 input 元素用于输入密码。用户输入的字符在这种文本框中显示为星号（*）之类的掩饰字符。下表罗列了在 type 属性被设置为 password 时可用的一些额外属性。

属性	说明
maxlength	设定用户在文本框中输入的字符的最大数目
pattern	指定一个用于输入验证的正则表达式
placeholder	指定关于所需数据类型的提示
readonly	用来将文本框设为只读以阻止用户编辑器内容
required	表明用户需要输入一个值，否则无法通过输入验证
size	通过指定文本框中可见的字符数目设定其宽度
value	设置文本框的初始值

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>        
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="name">
                    Name: <input value="Adam" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password" placeholder="Min 6 characters"
                        id="password" name="password"/>
                </label>
            </p>            
            <p>
                <label for="fave">
                    Fruit: <input value="Apples" id="fave" name="fave"/>
                </label>
            </p>
            <button type="submit">Submit Vote</button>
        </form>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nqoqfm7Q-1624170218809)(素材/使用password型input元素.png)]

上面的代码中，那个 password 型 input 元素还设置了 placeholder 属性，用以提示用户所需的是什么类型的密码。用户输入密码的时候，浏览器会清除文本框中的占位符提示并将每一个密码字符显示为圆点。

提加表单时，服务器收到的是明文密码。

3、用 input 元素生成按钮

将 input 元素的 type 属性设置为 submit、reset 和 button 会生成类似 button 元素那样的按钮。

type 属性值	说明	可用的额外属性
submit	生成用来提交表单的按钮	formaction、formenctype、formmethod、formtarget 和 formnovalidate
reset	生成用来重置表单的按钮	无
button	生成不执行任何操作的按钮	无

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>        
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="name">
                    Name: <input value="Adam" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password" placeholder="Min 6 characters"
                        id="password" name="password"/>
                </label>
            </p>            
            <p>
                <label for="fave">
                    Fruit: <input value="Apples" id="fave" name="fave"/>
                </label>
            </p>
            <input type="submit" value="Submit Vote"/>
            <input type="reset" value="Reset Form"/>
            <input type="button" value="My Button"/>
        </form>
    </body>
</html>

用 input 元素生成的按钮与用 button 元素的不同之处在于后者可以用来显示含标记的文字。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MR4W6xiq-1624170218810)(素材/用input生成按钮.png)]

4、用 input 元素为输入数据把关

input 元素的 type 属性可以对用户输入的数据类型提出更具体的要求。

属性	说明
checkbox	将输入限制为在一个 “是/否” 二态复选框中进行选择
color	只能输入颜色信息
date	只能输入日期
datetime	只能输入带时区信息的世界时（包括日期和时间）
datetime-local	只能输入不带时区信息的世界时（包括日期和时间）
email	只能输入规范的电子邮箱地址
month	只能输入年和月
umber	只能输入整数或浮点数
radiobutton	将输入限制为在一组固定选项中进行选择
range	只能输入指定范围内的数值
tel	只能输入规范的电话号码
time	只能输入时间信息
week	只能输入年及星期信息
	只能输入完全限定的 URL

4.1、用 input 元素获取数值

type 属性设置为 number 的 input 元素生成的输入框只接受数值。下表罗列了一些 input 元素可用的额外属性。

属性	说明
list	指定为文本框提供建议值的 datalist 元素，其值为 datalist 元素的 id 值。
min	设定可接受的最小值以便进行输入验证
max	设定可接受的最大值以便进行输入验证
readonly	只读
required	表明用户必须输入一个值，否则无法通过输入验证
step	指定上下调节数值的步长
value	元素的初始值

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>        
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="name">
                    Name: <input value="Adam" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password" placeholder="Min 6 characters"
                        id="password" name="password"/>
                </label>
            </p>            
            <p>
                <label for="fave">
                    Fruit: <input value="Apples" id="fave" name="fave"/>
                </label>
            </p>
            
            <p>
                <label for="price">
                    $ per unit in your area:
                    <input type="number" step="1" min="0" max="100"
                          value="1" id="price" name="price"/>
                </label>
            </p>
            <input type="submit" value="Submit Vote"/>
        </form>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LkniVkCw-1624170218811)(素材/number型input元素.png)]

4.2、用 input 元素获取指定范围内的数值

获取数值的另一种方法是使用 range 型 input 元素。用户只能用它从事先规定范围内选择一个数值。range 型 input 元素支持的属性与 number 型相同。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>        
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="name">
                    Name: <input value="Adam" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password" placeholder="Min 6 characters"
                        id="password" name="password"/>
                </label>
            </p>            
            <p>
                <label for="fave">
                    Fruit: <input value="Apples" id="fave" name="fave"/>
                </label>
            </p>
            
            <p>
                <label for="price">
                    $ per unit in your area: 1
                    <input type="range" step="1" min="0" max="100"
                          value="1" id="price" name="price"/>100
                </label>
            </p>
            <input type="submit" value="Submit Vote"/>
        </form>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zp3LqzJY-1624170218812)(素材/使用range型input元素.png)]

4.3、用 input 元素获取布尔型输入

checkbox 型 input 元素会生成供用户选择是否的复选框。这种类型的 input 元素支持额外的属性：

属性	说明
checked	设置了该属性的复选框刚显示出来时或重置表单后呈勾选状态
required	表示用户必须勾选该复选框，否则无法通过认证
value	设定在复选框呈勾选状态时提交给服务器的数据值，默认为 on

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>        
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="name">
                    Name: <input value="Adam" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password" placeholder="Min 6 characters"
                        id="password" name="password"/>
                </label>
            </p>            
            <p>
                <label for="fave">
                    Fruit: <input value="Apples" id="fave" name="fave"/>
                </label>
            </p>
            <p>
                <label for="veggie">
                   Are you vegetarian: <input type="checkbox" id="veggie" name="veggie"/>
                </label>
            </p>            
            <input type="submit" value="Submit Vote"/>
        </form>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XErIdndR-1624170218813)(素材/用input元素生成复选框.png)]

在提交给服务器时，未勾选的则不会提交给服务器。

4.4、用 input 元素生成一组固定选项

radio 型 input 元素可以用来生成一组单选按钮，供用户从一批固定的选项中做出选择。它适合可用有效数据不多的情况。支持的额外属性如下：

属性	说明
checked	设置了该属性的复选框刚显示出来时或重置表单后呈勾选状态
required	表示用户必须勾选该复选框，否则无法通过认证
value	设定在复选框呈勾选状态时提交给服务器的数据值，默认为 on

每一个 radio 型 input 元素代表着提供给用户的一个选项。要生成一组互斥的选项，只需要将所有相关 input 元素的 name 属性设置为同一个值即可。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>        
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="name">
                    Name: <input value="Adam" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password" placeholder="Min 6 characters"
                        id="password" name="password"/>
                </label>
            </p>            
            <p>
                <fieldset>
                    <legend>Vote for your favorite fruit</legend>
                    <label for="apples">
                        <input type="radio" checked value="Apples" id="apples"
                            name="fave"/>
                        Apples
                    </label>
                    <label for="oranges">
                        <input type="radio" value="Oranges" id="oranges" name="fave"/>
                        Oranges
                    </label>
                    <label for="cherries">
                        <input type="radio" value="Cherries" id="cherries" name="fave"/>
                        Cherries
                    </label>
                </fieldset>
            </p>           
            <input type="submit" value="Submit Vote"/>
        </form>
    </body>
</html>

此例中使用了三个 radio 型 input 元素。它们的 name 属性都设置为 fave，以便浏览器把它们关联起来。这样一来，选择其中任何一个按钮都会取消对另外两个按钮的选择。这三个元素还设置了 value 属性值，提交表单时选定按钮的这个值会被发送给服务器。第一个 radio 型 input 元素设置了 checked 属性，这样这组选项就总有一个被选中。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lcdaSv8y-1624170218813)(素材/用input元素生成一组单选按钮.png)]

同样，在提交时，未勾选则不会提交给服务器。

4.5、用 input 元素获取有规定格式的字符串

type 属性设置为 email、tel 和 url 的 input 元素能接受的输入数据分别为有效的电子邮件地址、电话号码和 URL。支持的额外属性如下：

属性	说明
list	指定为文本框提供建议值的 datalist 元素，其值为 datalist 元素的 id 值
maxlength	设定用户能够在文本框中输入的字符的最大数目
pattern	指定一个用于输入验证的正则表达式
placeholder	指定关于所需数据类型的提示
readonly	用来将文本框设为只读以阻止用户编辑其内容
required	表示用户必须提供一个值，否则无法通过输入验证
size	通过指定文本框中可见的字符数目设定其宽度
value	指定元素的初始值。对于 email 型 input 元素，其值可能是单个邮箱地址，也可能是以逗号分隔的多个邮箱地址

email 型 input 还支持一个名为 multiple 的属性。设置了该属性的 input 元素可以接受多个电子邮箱地址。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>        
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="name">
                    Name: <input value="Adam" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password" placeholder="Min 6 characters"
                        id="password" name="password"/>
                </label>
            </p>
            <p>
                <label for="email">
                    Email: <input type="email" placeholder="user@domain.com"
                        id="email" name="email"/>
                </label>
            </p>            
            <p>
                <label for="tel">
                    Tel: <input type="tel" placeholder="(XXX)-XXX-XXXX"
                        id="tel" name="tel"/>
                </label>
            </p>         
            <p>
                <label for="url">
                    Your homepage: <input type="url" id="url" name="url"/>
                </label>
            </p>         
            <input type="submit" value="Submit Vote"/>
        </form>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iHLF6UFd-1624170218814)(素材/用input元素获取有规定格式的字符串.png)]

4.6、用 input 元素获取时间和日期

type 属性值	说明
datetime	获取世界时日期和时间，包括时区信息
datetime-local	获取本地地日期和时间（不包含时区信息）
date	获取本地日期（不包含时间和时区信息）
month	获取年月信息（不含日、时间和时区信息）
time	获取时间
week	获取当前星期

还支持额外的属性：

属性	说明
list	指定为文本框提供建议值的 datalist 元素，其值为 datalist 元素的 id 值。
min	设定可接受的最小值以便进行输入验证
max	设定可接受的最大值以便进行输入验证
readonly	只读
required	表明用户必须输入一个值，否则无法通过输入验证
step	指定上下调节数值的步长
value	元素的初始值

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>        
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="name">
                    Name: <input value="Adam" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password" placeholder="Min 6 characters"
                        id="password" name="password"/>
                </label>
            </p>            
            <p>
                <label for="fave">
                    Fruit: <input value="Apples" id="fave" name="fave"/>
                </label>
            </p>
            <p>
                <label for="lastbuy">
                   When did you last buy: <input type="date" 
                      id="lastbuy" name="lastbuy"/>
                </label>
            </p>            
            <input type="submit" value="Submit Vote"/>
        </form>
    </body>
</html>

4.7、用 input 元素获取颜色值

color 型 input 元素只能用来选择颜色。这种 input 元素中的颜色值以 7 个字符的格式表示：以 # 开头，接下来是三个十六进制数，它们分别代表着红、绿、蓝三种原色的值。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>        
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="name">
                    Name: <input value="Adam" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password" placeholder="Min 6 characters"
                        id="password" name="password"/>
                </label>
            </p>
            <p>
                <label for="fave">
                    Favorite Fruit: <input type="text" id="fave" name="fave"/>
                </label>
            </p>
            <p>
                <label for="color">
                    Color: <input type="color" id="color" name="color"/>
                </label>
            </p>
            <input type="submit" value="Submit Vote"/>
        </form>
    </body>
</html>

5、用 input 元素获取搜索用词

search 型 input 元素会生成一个单行文本框，供用户输入搜索用词。它实际什么也不会做，它既不会对用户输入的数据做出限制，也没有诸如本页或借助用户的默认搜索引擎进行搜索这样的功能。这类 input 元素支持的额外属性与 text 型 input 元素相同。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>        
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="name">
                    Name: <input value="Adam" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password" placeholder="Min 6 characters"
                        id="password" name="password"/>
                </label>
            </p>
            <p>
                <label for="fave">
                    Favorite Fruit: <input type="text" id="fave" name="fave"/>
                </label>
            </p>
            <p>
                <label for="search">
                    Search: <input type="search" id="search" name="search"/>
                </label>
            </p>
            <input type="submit" value="Submit Vote"/>
        </form>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UqvzpqQx-1624170218815)(素材/search型input元素.png)]

6、用 input 元素生成隐藏的数据项

有时设计者会希望使用一些用户看不到或不能编辑的数据项，但又要求提交表单时也能将其发送给服务器。hidden 型 input 元素可以用来达到这个目的。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>        
        <form method="post" action="http://titan:8080/form">
            <input type="hidden" name="recordID" value="1234"/>
            <p>
                <label for="name">
                    Name: <input value="Adam" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password" placeholder="Min 6 characters"
                        id="password" name="password"/>
                </label>
            </p>
            <p>
                <label for="fave">
                    Favorite Fruit: <input type="text" id="fave" name="fave"/>
                </label>
            </p>
            <input type="submit" value="Submit Vote"/>
        </form>
    </body>
</html>

此例中使用了一个 hidden 型 input 元素。其 name 和 value 属性的值分别设置为 recordID 和 1234。浏览器显示这个页面的时候不会显示该元素，但是提交时会提交给服务器。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fBdXg9lC-1624170218815)(素材/含有一个hidden型input元素的网页.png)]

7、用 input 元素生成图像按钮和分区响应图

image 型 input 元素生成的按钮显示为一幅图像，点击它可以提交表单。额外的属性如下：

属性	说明
alt	提供元素的说明文字
formaction	等价于 button 元素的同名属性
formenctype	等价于 button 元素的同名属性
formmethod	等价于 button 元素的同名属性
formtarget	等价于 button 元素的同名属性
formnovalidate	等价于 button 元素的同名属性
height	以像素为单位设置图像的高度
src	指定要显示的图像的 URL
width	以像素为单位设置图像的宽度

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>        
        <form method="post" action="http://titan:8080/form">
            <input type="hidden" name="recordID" value="1234"/>
            <p>
                <label for="name">
                    Name: <input value="Adam" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password" placeholder="Min 6 characters"
                        id="password" name="password"/>
                </label>
            </p>
            <p>
                <label for="fave">
                    Favorite Fruit: <input type="text" id="fave" name="fave"/>
                </label>
            </p>
            <input type="image" src="accept.png" name="submit"/>
        </form>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qMsyUP7l-1624170218816)(素材/使用image型input.png)]

8、用 input 元素上传文件

最有一种 input 元素类型是 file 型，它可以在提交表单时将文件上传到服务器。支持的额外属性如下：

属性	说明
accept	指定接受的 MIME 类型
multipe	设置这个属性的 input 元素可以一次上传多个文件
required	表明用户必须为其提供一个值，否则无法通过输入验证

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>        
        <form method="post" action="http://titan:8080/form" 
            enctype="multipart/form-data">
            <input type="hidden" name="recordID" value="1234"/>
            <p>
                <label for="name">
                    Name: <input value="Adam" id="name" name="name"/>
                </label>
            </p>
            <p>
                <label for="password">
                    Password: <input type="password" placeholder="Min 6 characters"
                        id="password" name="password"/>
                </label>
            </p>
            <p>
                <label for="fave">
                    Favorite Fruit: <input type="text" id="fave" name="fave"/>
                </label>
            </p>
            <p>
                <input type="file" name="filedata"/>
            </p>
            <input type="submit" value="Submit"/>
        </form>
    </body>
</html>