从零开始HTML＃028——5分钟-Forms 表单

标签

#028_Pro_Forms

今天我们通过做一个小小的页面，来学习关于表单的内容。HTML 表单用于收集用户输入。表单元素有许多不同类型，例如：复选框、单选按钮、提交按钮等等。这些是经常会用到的网页交互元素。

简单的输入

首先，我们需要“圈出一块地”用于建设表单，这里用 form 标签，其闭合区域用于构建表单元素。

其中，action 定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。通常，表单会被提交到 web 服务器上的网页。method 属性的值有 post / get 两种。

简单示范

值得注意的是，如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，可以使用 get 。但是表单正在更新数据，或者包含敏感信息（例如密码），一定要使用 post 。post 拥有更高的安全性，因为在页面地址栏中被提交的数据是不可见的。

表单示范

这里先学习四个：标签 label 、输入框 input、文本区 textarea 和按键 submit。

如果要正确地被提交，每个输入字段必须设置一个 name 属性，这个 name 属性就像是一个变量，装载这个输入元素的值，然后在提交的时候，通过这个变量提交出去。

简单示范

效果

样式

尽量不要在元素上增加样式，要到样式表上做统一的修改。样式上的属性都是以前教过的不再重复，除了 label 的 display 是规定元素应该生成的框的类型，这里显示块状框。对待 textarea 和普通的 div 有点相像，直接设置长宽，当然需要别的样式可以自行搜素。

输入类型

可能大家回注意到，上面例子中的输入框和提交按键，都是用 input 元素做出来的，这就涉及到 input 的 type 属性，

input 默认输入文本框

input type="checkbox" 复选框

input type="radio" 单选按钮

input type="submit" 定义用于向表单处理程序提交表单的按钮。

input 的类型

效果

最后，动手实现试试看吧~