标签
#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 的类型
效果
最后,动手实现试试看吧~
领取专属 10元无门槛券
私享最新 技术干货