从零开始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 的类型

效果

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180716G1OQ9900?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券