HTML表单页面的运用
本章目标：掌握表单基本结构<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表单页面的运用的更多相关文章
- C# Winform 通过FlowLayoutPanel及自定义的编辑控件，实现快速构建C/S版的编辑表单页面
个人理解,开发应用程序的目的,不论是B/S或是C/S结构类型,无非就是实现可供用户进行查.增.改.删,其中查询用到最多,开发设计的场景也最为复杂,包括但不限于:表格记录查询.报表查询.导出文件查询等等 ...
- Winform 通过FlowLayoutPanel及自定义的编辑控件，实现快速构建C/S版的编辑表单页面 z
http://www.cnblogs.com/zuowj/p/4504130.html 不论是B/S或是C/S结构类型,无非就是实现可供用户进行查.增.改.删,其中查询用到最多,开发设计的场景 也最为 ...
- SharePoint Designer定制MOSS/WSS表单页面
转:http://blog.csdn.net/yl_99/article/details/7087897 方法一.使用SharePoint Designer配合enderingTemplate文件来定 ...
- 开发日志系列：一个表单页面的呈现与提交（一）——JSON的操作
JSON操作 引子 最近在做一个表单页面,大概是这个样子的 这里打算用一个JSON存储所有的信息,我们可以理解为,所有东西都存在一个字符串里面.方便,快捷,易读,数据库操作也方便了.甚至,可以将很多不 ...
- Form提交表单页面不跳转
1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- Dynamics 365 CE命令栏按钮点击后刷新表单页面方法
微软动态CRM专家罗勇 ,回复326或者20190428可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! Dynamics 365 Customer Engagement ...
- Spring Security默认的用户登录表单 页面源代码
Spring Security默认的用户登录表单 页面源代码 <html><head><title>Login Page</title></hea ...
- 基于react hooks,zarm组件库配置开发h5表单页面
最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方 ...
- jeecg表单页面控件权限设置（请先看官方教程，如果能看懂就不用看这里了）
只是把看了官方教程后,觉得不清楚地方补充说明一下: 1. 2. 3. 4.用"jeecgDemoController.do?addorupdate"这个路径测试,不出意外现在应该可 ...
随机推荐
- 怎样删除Weblogic Domain？
转自:http://blog.csdn.net/biplusplus/article/details/7433558 旁白 由于没有现成的配置工具可以做这件事,我们需要手工来删除. 正题 以下方法适用 ...
- Android Freeline加速编译App方案 使用和总结
Freeline简单介绍 在Android Studio还没推出Instant Run功能之前,每次改动Android project项目时都要将整个项目又一次编译一次,然后再将资源和代码文件打包成A ...
- Ubuntu 下的webservices
搞 了一下午: 开发server程序.需使用gSOAP生成server端代码框架. 我们有两种做法: 编写WSDL,使用wsdl2h生成头文件,再soapcpp2生成框架代码. 编写头文件.使用soa ...
- 【Datastage】导出的dsx文件如何统计导出作业个数
我们在日常使用ds时候,会将很多ds打包导出,例如:有100个作业,现在我们打包导出,但是导出之后如何确认我们是否已经完全导出,会不会在导出的时候漏了一个作业呢? 不用怕! 我们使用编辑打开导出的ds ...
- mac 使用apache开启https功能，实现ios局域网内测（二）
二.创建app.plist 1. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist ...
- 微信小程序挑一挑辅助
1.窗体 using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;usi ...
- simpleRNN
simpleRNN 训练集为<爱丽丝梦境>英文版txt文档,目标:根据随机给出的10个字符,生成可能的后100个字符 词向量空间生产 In [4]: INPUT_FILE = " ...
- C#Virtual和Override的几种组合
情况1: class A{public void Show()} class B:A{public void Show()} 编译通过,有警告让在B的方法里添加new关键字,以便将A的方法隐藏 编译时 ...
- import { Subject } from 'rxjs/Subject';
shared-service.ts import { Observable } from 'rxjs/Observable'; import { Injectable } from '@angular ...
- 点滴积累【C#】---错误日志记录到txt文本里。
效果: 描述:将系统中的错误信息,try catch到日志里面. 代码: [后端代码] using System; using System.Collections.Generic; using Sy ...