详解HTML表单的input元素

来源：互联网 2023-03-17 00:12:15 248

详解HTML表单的input元素

方法/步骤

在网页设计中，经常需要搜集用户输入的一些信息，用于搜集用户输入信息的元素称为表单元素。input元素是HTML表单中最常用的元素，其作用是获取用户的输入信息。input提供了多种方式用于获取用户输入的信息，获取方式具体包括：

（1）提供输入框，获取用户输入的内容，输入的内容又可以分为文字内容和密码，在HTML5中又增加了邮箱地址、网页路径、搜索框等类型；

（2）提供按钮，获取用户单击按钮的事件；

（3）提供检查框，获取用户的多个选择项；

（4）提供单选框，获取用户的单个选择项；

（5）提供文件选择器，获取用户选择本地存储文件的路径，并将文件提交到服务端；

（6）提供自定义图片按钮，获取用户单击图片按钮的事件；

（7）提供表单提交和表单重置按钮，获取用户单击表单提交和表单重置按钮事件，并完成表单的提交和表单内容重置动作。

input元素使用input标签，input标签有一个非常重要的属性type，type属性的值确定了input元素获取用户输入的方式，下表列出了type的属性值及其作用。

详解HTML表单的input元素

在网页中使用表单元素时，需要把表单元素放置在form标签内，当用户单击表单内的提交按钮时，form标签内所有表单元素都将被浏览器提交到服务器端，服务器端的处理程序对提交的表单进行处理并返回处理后的结果页面。

例1：设计一个登录网页，登录网页提供两个输入框和一个提交按钮，输入框分别获取用户输入的登录名和密码，提交按钮提交用户输入的登录名和密码信息到服务器端。

详解HTML表单的input元素

下图是浏览器显示效果。在上面的网页代码中，名称为username 的input标签type属性是text，浏览器会把type属性值为text的标签显示为一个输入框，允许用户输入内容；名称为psw的input标签type属性是password，浏览器会把type属性值为password的标签显示为一个输入框，允许用户输入内容，但输入的内容以密文显示，仅显示“*”；type属性为submit的input标签是提交按钮，用户单击提交按钮后，浏览器会把username和paw的内容提交到服务器端，服务器端的路径由form标签的action给出。

详解HTML表单的input元素

在上面的网页代码中，input标签的属性maxlength设置了输入框中允许输入字符的最大数；input标签的属性value设置了输入框中的默认值，value的值为空时，表示没有默认值。

例2：设计一个用户信息登记网页，用户信息包括用户姓名、年龄、性别、邮箱、爱好（可多选）。

详解HTML表单的input元素

4该信息未经许可获取自百度经验

下图是浏览器显示效果。在上面的网页代码中，性别的选择属于单项选择，因此input标签的type属性值设置为radio，两个input标签的name属性值设置为相同的值，并组成一个性别选择组，实现多选一的功能；爱好的选择属于多项选择，因此input标签的type属性值设置为checkbox，可以进行多选，name名称的值无需一致，checked为默认的选择项。

详解HTML表单的input元素