本章目标：掌握表单基本结构<form>

掌握各种表单元素
能理解post和get两种提交方式的区别

本章重点：掌握各种表单元素

本章难点：post和get两种提交方式的区别

一、   
HTML表单

表单：

表单是一个能够包含表单元素的区域。

表单元素是能够让用户在表单中输入信息的元素（比如文本框，密码框，下拉菜单，单选框，复选框等等）。

表单是用<form>元素定义的：

Input：

最常用的表单标签是<input>标签。Input的类型用type属性指定。最常用的input类型解释如下：

文本框：在表单中，文本框用来让用户输入字母、数字等等。

单选按钮：当需要用户从有限个选项中选择一个时，使用单选按钮。

注意，各选项中只能选取一个。

复选框：当需要用户从有限个选项中选择一个或多个时，使用复选框。

表单的action属性和提交按钮：当用户点击提交按钮的时候，表单的内容会被提交到其他文件。表单的action属性定义了所要提交到的目的文件，该目的文件收到信息后通常进行相关的处理。

如果在上面这个文本框中输入一些字符，按下提交按钮以后，输入的字符将被提交到页面“action.asp”。

更多示例：

简单的下拉列表：

<html>

<body>

<form>

<select name="cars">

<option value="volvo">Volvo

<option value="saab">Saab

<option value="fiat">Fiat

<option value="audi">Audi

</select>

</form>

</body>

</html>

这个例子说明了在HTML页面如何创建下拉列表。下拉列表是可以选择的列表。

预选的下拉列表：

<html>

<body>

<form>

<select name="cars">

<option value="volvo">Volvo

<option value="saab">Saab

<option value="fiat"
selected>Fiat

<option value="audi">Audi

</select>

</form>

</body>

</html>

这个例子说明了如何创建一个含有预先选定元素的下拉列表。

文本域：

<html>

<body>

<p>

This example demonstrates a text-area.

</p>

<textarea rows="10"
cols="30">

The cat was playing in the garden.

</textarea>

</body>

</html>

这个例子说明了如何创建文本域（多行文本），用户可以在其中输入文本。在文本域中，字符个数不受限制。

创建按钮：

<html>

<body>

<form>

<input type="button"
value="Hello world!">

</form>

</body>

</html>

这个例子说明了如何创建按钮。按钮上的文字可以自己定义。

数据周围的标题边框：

<html>

<body>

<fieldset>

<legend>

Health information:

</legend>

<form>

Height<input type="text"
size="3">

Weight<input type="text"
size="3">

</form>

</fieldset>

<p>

If there is no border around the input form,
your browser is too old.

</p>

</body>

</html>

这个例子说明了如何在数据周围画带有标题的边框。

从表单发送电子邮件：

<html>

<body>

<form action="MAILTO:someone@w3schools.com"  method="post"

enctype="text/plain">

<h3>This form sends an e-mail to
W3Schools.</h3>

Name:<br>

<input type="text"
name="name" value="yourname" size="20">

<br>

Mail:<br>

<input type="text"
name="mail" value="yourmail" size="20">

<br>

Comment:<br>

<input type="text"
name="comment" value="yourcomment" size="40">

<br><br>

<input type="submit"
value="Send">

<input type="reset"
value="Reset">

</form>

</body>

</html>

这个例子说明了如何从一个表单发送电子邮件

HTML表单页面的运用的更多相关文章

  1. C# Winform 通过FlowLayoutPanel及自定义的编辑控件，实现快速构建C/S版的编辑表单页面

    个人理解,开发应用程序的目的,不论是B/S或是C/S结构类型,无非就是实现可供用户进行查.增.改.删,其中查询用到最多,开发设计的场景也最为复杂,包括但不限于:表格记录查询.报表查询.导出文件查询等等 ...

  2. Winform 通过FlowLayoutPanel及自定义的编辑控件，实现快速构建C/S版的编辑表单页面 z

    http://www.cnblogs.com/zuowj/p/4504130.html 不论是B/S或是C/S结构类型,无非就是实现可供用户进行查.增.改.删,其中查询用到最多,开发设计的场景 也最为 ...

  3. SharePoint Designer定制MOSS/WSS表单页面

    转:http://blog.csdn.net/yl_99/article/details/7087897 方法一.使用SharePoint Designer配合enderingTemplate文件来定 ...

  4. 开发日志系列：一个表单页面的呈现与提交（一）——JSON的操作

    JSON操作 引子 最近在做一个表单页面,大概是这个样子的 这里打算用一个JSON存储所有的信息,我们可以理解为,所有东西都存在一个字符串里面.方便,快捷,易读,数据库操作也方便了.甚至,可以将很多不 ...

  5. Form提交表单页面不跳转

    1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  6. Dynamics 365 CE命令栏按钮点击后刷新表单页面方法

    微软动态CRM专家罗勇 ,回复326或者20190428可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! Dynamics 365 Customer Engagement ...

  7. Spring Security默认的用户登录表单 页面源代码

    Spring Security默认的用户登录表单 页面源代码 <html><head><title>Login Page</title></hea ...

  8. 基于react hooks,zarm组件库配置开发h5表单页面

    最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方 ...

  9. jeecg表单页面控件权限设置（请先看官方教程，如果能看懂就不用看这里了）

    只是把看了官方教程后,觉得不清楚地方补充说明一下: 1. 2. 3. 4.用"jeecgDemoController.do?addorupdate"这个路径测试,不出意外现在应该可 ...

随机推荐

  1. 2013年八月GBin1月刊

    2013年八月GBin1月刊 推荐十款来自极客标签的超棒前端特效[第十二期] 本周,我们带来了极客社区推荐的10款前端特效,仍然是非常有趣的小动态效果的页面生成.喜欢的可以直接将我们的在线调试代码插入 ...

  2. okhttp-OkGo的文件下载模块

    OkDownload主要功能 结合OkGo的request进行网络请求,支持与OkGo保持相同的配置方法和传参方式 支持断点下载,支持突然断网,强杀进程后,继续断点下载 每个下载任务具有无状态.下载. ...

  3. 算法笔记_095:蓝桥杯练习 拿糖果（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 妈妈给小B买了N块糖!但是她不允许小B直接吃掉. 假设当前有M块糖,小B每次可以拿P块糖,其中P是M的一个不大于根号下M的质因数.这时,妈 ...

  4. kvm 虚拟化 SMP（对称多处理器）介绍及配置

    一.SMP(对称多处理器)介绍 1)SMP简介 在计算机技术很普及和日益发达的今天,以 Intel.IBM 为代表的一些大公司推动着中央处理器(CPU)技术的飞速发展和更新换代.在如今计算机系统中,多 ...

  5. Docker exec与Docker attach

    转载博客地址:http://blog.csdn.net/halcyonbaby 新浪微博:@寻觅神迹 内容系本人学习.研究和总结,如有雷同,实属荣幸! ================== Docke ...

  6. Tomcat 监控的几种方法

    Tomcat 监控方法 方法1:.使用tomcat自带的status页 具体方法: 步骤1:修改%tomcat安装路径%\conf \tomcat-users文件,配置admin设置权限.在<t ...

  7. springmvc管理资源开放

    关于web.xml的url映射的小知识:<url-pattern>/</url-pattern>  会匹配到/login这样的路径型url,不会匹配到模式为*.jsp这样的后缀 ...

  8. debian下运行netstat失败

    如果提示:bash: netstat: command not found 说明没有安装netstat工具,而该工具在 net-tools 工具包内. apt-get install net-tool ...

  9. Mac OSX下Go语言开发环境的搭建与配置--使用InteliJ IDEA 13

    折腾了一上午终于把go语言的ide配置好了. 其实GO语言的语法和特性早在去年的时候就学习了一遍.结果后来一直没机会进行开发,结果还是个GO小白.感叹一下,要学好一门编程语言唯一的途径就是多写代码.. ...

  10. Docker Python API 与 Docker Command

    span.kw { color: #007020; font-weight: bold; } code > span.dt { color: #902000; } code > span. ...