HTML 表单
- W_Z_C
- 共 1248 字,阅读约 3 分钟
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 类型就可以让你选择想要的颜色:
类似的还有 date
、month
、range
、tel
、time
等等,很有可能以后会更多,这里其实没有必要介绍下去了,毕竟本教程也仅仅是抛砖引玉而已,线上项目真的需要手写 HTML 的时候再去查也来得及,你说对吧?我相信大多数的时候,你都没有机会,毕竟现成的 UI 框架数都数不过来……