html_表单
一、表单框架简介
表单是提供让读者在网页上输入，勾选和选取数据，以便提交给服务器数据库的工具。（用于将信息提交给服务器）
<form>...</form>标记
作用：用于创建一个表单,定义表单的开始和结束，他是一个容器，用于包含其他表单元素，比如文本框，单选框等。表单元素必须在form标记内才有效
属性：
action=url(传送的目标，处理表单信息的服务器端应用程序)
method=处理表单数据的方法（POST/GET(默认)）
注：POST方法可以传递大量的数据；GET方法将值附加到请求该页的URL中，适合传递少量的数据
name=表单名称
注意：
所有表单元素都要放置在form标签中。
所有的表单元素，以input为例，必须包含type属性和name属性
<h2>登录界面</h2>
<form action="index.html" method="post">
用户名：<input type="text" name="username"/><br/>
密 码：<input type="password" name=""pwd/><br />
<input type="submit" value="登录"/>
<input type="reset" value="重置"/>
</form>
<form action="index.html" method="post" name="">
<table border="1" width="300" align="center" cellpadding="5">
<tr>
<td>用户名：</td>
<td><input type="text"/ name="username"></td>
</tr>
<tr>
<td colspan="2"><input name="提交" type="submit" value="提交"/></td> </tr>
</table>
</form>
二、表单详解：
1.单行文本框：
<input type="text" name=文本框名称 value=默认初始值 size=显示字符数 maxlength=最多容纳字符数
readonly="readonly"(设置为只读 ,用于当注册完之后，如果用户想修改个人的一些信息，但有些是不可以修改的，就设置为只读。) disabled="disabled"(设置为不可操作)/>
用户名:<input type="text" name="username" maxlength="15" size="5"/>
2.密码框：
<input type="password" name=文本框名称" 称 value=默认初始值 size=显示字符数 字符数 maxlength=最多容纳字符数 ,
readonly="readonly"(设置为只读,用于当注册完之后，如果用户想修改个人的一些信息，但有些是不可以修改的，就设置为只读。)/>
密码:<input type="password" name="password1" maxlength="16"/>
3.单选框：
<input type="radio" name="单选框名称"（一组单选框name的值一定要相同）value="提交值" checked="checked"(是否被选中，默认选中)/>
<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女" />女
设置当点击文字的时候也选中该选项：
<lable>标注内容</lable>:为input标签定义标注：
属性：for（与关联的相关元素的id相同）
<label for="man">男</label>
<input type="radio" name="sex" value="男" checked="checked" id="man"/>
<label for="women">女</label>
<input type="radio" name="sex" value="女" id="women" />
4.下拉列表：
<select name="列表框名称">
<option selected="selected"添加到哪个(哪个为初始选择，就添加selected属性) value="提交值(一定要写这个值)">列表1 </option>
<option value="提交值">列表2 </option>
</select>
<select name="citys">
<option value="北京">北京 </option>
<option value="上海">上海 </option>
<option value="杭州">杭州 </option>
<option value="广州">广州 </option>
<option value="深圳">深圳 </option>
<option value="河源" selected="selected">河源</option>
</select>
分组 <optgroup label="分组名称"></optgroup>
<select name="citys">
<optgroup label="广州"></optgroup>
<option value="海珠区">海珠区 </option>
<option value="天河区">天河区 </option>
<option value="萝岗区">萝岗区 </option>
<option value="花都区">花都区</option>
<option value="番禺区">番禺区 </option>
<option value="越秀区" selected="selected">越秀区</option>
<optgroup label="河源"></optgroup>
<option value="紫金县">紫金县 </option>
<option value="和平县">和平县 </option>
<option value="连平县">连平县 </option>
<option value="东源县">东源县</option>
<option value="龙川县">龙川县 </option> </select>
列表标记的另一种用法：
<select name="列表框名称" size="显示的行数" multiple(如果允许多选，则有该属性，否则没有改属性)>
<option value="提交值">列表1 </option>
.....
</select>
<select name="target" size="4" multiple="multiple">
<option value="普通朋友">普通朋友 </option>
<option value="爱人">爱人 </option>
<option value="同行">同行 </option>
<option value="爱好">爱好 </option>
</select>
5.多选框：
<input type="checkbox" name="复选框名称" value="提交值" "checkbox=""checkbox"(是否被选中)/>篮球
<input type="checkbox" name="love" value="篮球" checked="checked"/>篮球
<input type="checkbox" name="love" value="音乐"/>音乐
<input type="checkbox" name="love" value="美术"/>美术
<input type="checkbox" name="love" value="睡觉"/>睡觉
6.浏览框：
<input type="file" name="名称" size="显示框的长度"/>
照片上传：<input type="file" name="mypic" size="20"/>
7.多行文本框：
<textarea name="多行文本框名称" cols="每行中的字符数" rows="显示的行数">
初始内容（可以不写）
</textarea>
<textarea name="" cols="65" rows="5">
初始内容（可以不写）
</textarea>
8. 隐藏域：
用于传递一些信息，比如用户的ip地址等，在网页中是不显示的,只要写在from标签内就可以
<input name="名称" type="hidden" value="提交值"/>
9. 按钮：
属性：name="按钮名称" value="按钮显示文本"
提交：submit
重置：reset
普通按钮：button
<input type="submit" value="提交" />
<input type="reset" value="取消"/>
<input type="button" value="欢迎" onclick="alert('你好')"/>
10.图片按钮：
<input type="image" name="图片按钮名称" src="图片路径"/>
<input type="image" name="image" src="../../imgs/Default_36.gif"/>
11.表单外框：
<fieldset>...</filedset>:定义围绕在表单中元素的边框
<legend>...</legend>:为filedset标签定义标题
<fieldset>
<legend>会员注册</legend>
.....
</fieldset>
<body>
<!--
最外层加一个一行一列的表格是为了控制域的大小
-->
<table width="700" align="center">
<tr>
<td>
<form action="8-新闻网页案例.html" method="post" name="域名注册">
<fieldset>
<legend>域名注册</legend> <table width="550" border="0" cellpadding="5" align="center"> <tr>
<td colspan="2"><b>请填写域名信息(请您务必填写真实，有效和完整的域名注册信息</b></td>
</tr> <tr>
<td align="right">登录账号：</td>
<td align="left">
<input type="text" name="user" />
</td>
</tr> <tr>
<td align="right">密码：</td>
<td align="left">
<input type="password" name="password" maxlength="16"/>
</td>
</tr> <tr>
<td align="right">性别：</td>
<td align="left">
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女"/>女
</td>
</tr> <tr>
<td align="right">注册网址：</td>
<td align="left">
<input type="text" name="url" value="www."/>
</td>
</tr> <tr>
<td align="right">注册网址后缀：</td>
<td align="left">
<input type="checkbox" name="houzhui" value=".com" checked="checked"/>.com
<input type="checkbox" name="houzhui" value=".cn" />.cn
<input type="checkbox" name="houzhui" value=".net" />.net
<input type="checkbox" name="houzhui" value=".org" />.org
</td>
</tr> <tr>
<td align="right">域名所有者(中文)：</td>
<td align="left">
<input type="text" name="author1"/>
</td>
</tr> <tr>
<td align="right">域名所有者(英文)：</td>
<td align="left">
<input type="text" name="author2"/>
</td> </tr> <tr>
<td align="right">所属区域：</td>
<td align="left">
<select name="country">
<option value="中国" selected="selected">中国 </option>
<option value="蒙古">蒙古 </option>
<option value="朝鲜">朝鲜 </option>
<option value="韩国">韩国 </option>
<option value="日本">日本 </option>
<option value="西班牙">西班牙</option>
<option value="新西兰">新西兰</option>
<option value="德国">德国</option>
<option value="美国">美国</option>
<option value="法国">法国</option>
<option value="英国">英国</option>
</select>
<select name="citys">
<option value="省份" selected="selected">-省份-</option>
<optgroup label="中国"></optgroup>
<option value="北京">北京</option>
<option value="河南省">河南省 </option>
<option value="湖南省">湖南省 </option>
<option value="广东省">广东省</option>
<option value="江苏省">江苏省 </option>
<option value="四川省" >四川省</option>
<optgroup label="美国"></optgroup>
<option value="迈阿密">迈阿密 </option>
<option value="芝加哥">芝加哥 </option>
<option value="洛杉矶">洛杉矶 </option>
</select>
</td>
</tr> <tr>
<td align="right">单位所在地：</td>
<td align="left">
<input type="text" name="danwei"/>
</td>
</tr> <tr>
<td align="right">单位负责人：</td>
<td align="left">
<input type="text" name="fuzeren"/>
</td>
</tr> <tr>
<td align="right">通信地址：</td>
<td align="left">
<input type="text" name="tongxindizhi"/>
</td>
</tr> <tr>
<td align="right">联系电话：</td>
<td align="left">
<input type="text" name="phoneNumber" maxlength="11"/>
</td>
</tr> <tr>
<td colspan="2" align="center">
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</td> </tr>
</table>
</fieldset>
</form>
</td>
</tr>
</table>
</body>
html_表单的更多相关文章
- HTML_表单标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 初识HTML_表单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML_创建易用的Web表单
首先创建一个表单域集合fieldset fieldset元素允许Web开发者将主题相关的表单组合在一起 <fieldset></fieldset> 要说明的是本例子中每个表单都 ...
- Kure讲HTML_列表标签及表单标签
首先我上个图来告诉大家什么是列表 左侧的这一部分就可以称为是列表或者叫树,其实我们可以通过div+css实现列表,可是考虑语义化的问题,我们还是看看html提供好的列表标签,html提供了两种列表,一 ...
- ASP.NET Aries 入门开发教程9：业务表单的开发
前言: 经过前面那么多篇的列表的介绍,终于到了大伙期待的表单开发了. 也是本系列的最后一篇文章了! 1:表单页面的权限设置与继承 对于表单页面,权限的设置有两种: 1:你可以选择添加菜单(设置为不显示 ...
- 探索ASP.NET MVC5系列之~~~3.视图篇（下）---包含常用表单和暴力解猜防御
其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...
- jQuery学习之路（8）- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- jQuery学习之路（5）- 简单的表单应用
▓▓▓▓▓▓ 大致介绍 接下来的这几个博客是对前面所学知识的一个简单的应用,来加深理解 ▓▓▓▓▓▓ 单行文本框 只介绍一个简单的样式:获取和失去焦点改变样式 基本结构: <form actio ...
- 12、Struts2表单重复提交
什么是表单重复提交 表单的重复提交: 若刷新表单页面, 再提交表单不算重复提交. 在不刷新表单页面的前提下: 多次点击提交按钮 已经提交成功, 按 "回退" 之后, 再点击 &qu ...
随机推荐
- HDOJ 2152 Fruit(母函数)
Fruit Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- Sqli-labs less 26
Less-26 TIPS:本关可能有的朋友在windows下无法使用一些特殊的字符代替空格,此处是因为apache的解析的问题,这里请更换到linux平台下. 本关结合25关,将空格,or,and,/ ...
- Static、final、abstract、接口、构造方法及java语法总结
Static:定义类的时候一般不用static来修饰,在一定意义上,用static修饰的字段可以作为全局变量,static修饰的字段和方法存储在类的内存区域,所有实例共享.static字段和方法都是属 ...
- C#创建UTF8无BOM文本文件
In order to omit the byte order mark (BOM), your stream must use a custom instance of UTF8Encoding i ...
- HDU4776 Ants(Trie && xor)
之前mark下来的一道题,今天填一下坑. 题意是这样子的.给你一棵边上有权的树.然后有树上两点(u,v)的路径有n*(n-1)条,路径(u,v)的权值是边权的xor. 然后下面有m个询问,询问你n*( ...
- POJ 1986 Distance Queries (最近公共祖先，tarjan)
本题目输入格式同1984,这里的数据范围坑死我了!!!1984上的题目说边数m的范围40000,因为双向边,我开了80000+的大小,却RE.后来果断尝试下开了400000的大小,AC.题意:给出n个 ...
- 转：jxl导出excel（合并单元格）
Demo 代码如下: import java.io.*; import jxl.*; import jxl.format.UnderlineStyle; import jxl.write.*; pub ...
- ios图片拉伸两种方法
UIImage *image = [UIImage imageNamed:@"qq"]; 第一种: // 左端盖宽度 NSInteger leftCapWidth = image. ...
- DF学Mysql（三）——Mysql数据类型
Mysql数据类型分为:整数类型.浮点数类型.定点数类型日期与时间类型字符串类型二进制类型 整数类型 字节数 无符号数取值范围 有符号数取值范围TINYINT 1 0-255 -128-127SMAL ...
- ExtJs之Ext.util.Format
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...