HTML 表单

HTML 表单

HTML 表单常用于收集不同类型的用户输入信息,包括姓名、电子邮件、电话号码等详细信息,我博客上的评论框就是典型的表单应用。

常用的表单包括很多熟悉的控件,例如输入框、复选框、单选按钮、提交按钮等等,这些元素通常以交互为目的,可以搜集用户提交的信息到服务器,服务器可以根据这些信息做出相应的反馈。

HTML 中使用 <form> 标签来创建表单:

<form>
    <label>Username: <input type="text"></label>
    <label>Password: <input type="password"></label>
    <input type="submit" value="Submit">
</form>

不同类型的控件全部放在 form 元素的内部,下面简单的介绍一下常用的控件。

文本输入控件

常用的文本输入控件主要是方便用户提交一些文本信息,对于不同的内容,有几种样式可选。一种是不同文本,可以使用 input 元素:

<form>
    <label for="username">Username:</label>
    <input type="text" name="username" id="username">
</form>

label 元素是表单中比较常见的节点,主要用作交互提示。下面是最终的效果:

文本输入控件

上面这种输入框可以输入普通的单行文本,如果想输入保护的信息,例如密码之类的文本可以更改 type 属性:

<form>
    <label for="user-pwd">Password:</label>
    <input type="password" name="user-password" id="user-pwd">
</form>

控件的显示效果和上面一致,但是输入的信息会被小圆点所代替:

密码输入控件

除此之外,你还可以能需要输入一些多行的文本数据,这种需要使用 textarea 元素:

<form>
    <label for="address">Address:</label>
    <textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>

多文本输入控件

单选按钮

单选按钮可以让用户在一组预设的信息中选择一个选项,类似考试中的单选题,使用方法和文本输入框类似,只不过 type 属性有所改变:

<form>
    <input type="radio" name="gender" id="male">
    <label for="male">Male</label>
    <input type="radio" name="gender" id="female">
    <label for="female">Female</label>
</form>

单选按钮

复选框

既然有单选,那肯定存在多选,同样的只需要将 type 修改为 checkbox:

<form>
    <input type="checkbox" name="sports" id="soccer">
    <label for="soccer">Soccer</label>
    <input type="checkbox" name="sports" id="cricket">
    <label for="cricket">Cricket</label>
    <input type="checkbox" name="sports" id="baseball">
    <label for="baseball">Baseball</label>
</form>

复选框

下拉列表

下拉列表在网页中非常常用,特别是地址区域选择之类的地方。下拉列表使用的是 select 和 option 元素,select 用来声明下拉列表的范围,option 用来声明下拉列表的选项:

<form>
    <label for="city">City:</label>
    <select name="city" id="city">
        <option value="sydney">Sydney</option>
        <option value="melbourne">Melbourne</option>
        <option value="cromwell">Cromwell</option>
    </select>
</form>

下拉列表

文件选择框

文件选择框允许用户上传本地文件,使用的时候只需要将 input 元素的 type 属性改为 file 即可:

<form>
    <label for="file-select">Upload:</label>
    <input type="file" name="upload" id="file-select">
</form>

文件选择框

提交和重置

默认情况下要想将表单的内容提交到服务器,需要使用提交按钮,点击提交按钮后会触发 HTTP 请求,该请求使用 form 元素的 action 属性提供地址,method 属性提供请求方法,form 元素内部的所有表单字段会自动将自身的值汇总到一起,发送到服务端,一般情况下表单字段的 name 是提交的键,而 name 对应的值则是由表单自动获取的:

<form action="action.php" method="post">
    <label for="first-name">First Name:</label>
    <input type="text" name="first-name" id="first-name">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

上面代码的显示效果如下:

提交和重置

代码中的 submit 和 reset 两种类型是表单的特殊按钮,点击 submit 会触发提交动作,而 reset 会触发表单的重置动作。如果点击 Submit 按钮,表单就会向 action.php 地址发送一个 POST 请求,请求内部会包含 first-name 字段:

提交和重置

上图是在浏览器的调试界面中截取的图片,因为是本地测试环境,所以请求地址 Request URL 显得很怪异,FormData 就是请求发送的数据。

其他

表单的类型其实远不止这些,例如 HTML5 新引入的 color 类型就可以让你选择想要的颜色:

颜色选择控件

类似的还有 datemonthrangeteltime 等等,很有可能以后会更多,这里其实没有必要介绍下去了,毕竟本教程也仅仅是抛砖引玉而已,线上项目真的需要手写 HTML 的时候再去查也来得及,你说对吧?我相信大多数的时候,你都没有机会,毕竟现成的 UI 框架数都数不过来……

大佬,给点反馈?

平均评分 / 5. 投票数:

很抱歉,这篇文章不能帮助到你

请让我们改进这篇文章

告诉我们我们如何改善这篇文章?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top