Pro028-从零开始HTML[#028]——5分钟- Forms 表单

<html>标签

#028_Pro_Forms

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


简单的输入

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

<form action="向服务器提交表单的地址" method="数据交换方式" />

    其中,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 的类型
效果

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,080评论 0 0
  •   JavaScript 最初的一个应用,就是分担服务器处理表单的责任,打破处处依赖服务器的局面。   尽管目前的...
    霜天晓阅读 687评论 0 3
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,991评论 19 139
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,749评论 1 45
  • 记忆中,关于奶奶的画面:斜着绕头绑一条约么10mm的黑绳(把松弛的双眼皮拉起来,否则挡住眼睛,影响视线),樱桃小嘴...
    Amyuyu阅读 182评论 0 0