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/>

    密&nbsp;&nbsp;&nbsp;&nbsp;码：<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="sex"  value="男"  checked="checked"/>男&nbsp;

 <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"/>&nbsp;

<label for="women">女</label>

<input type="radio" name="sex"  value="女" id="women" />

4.下拉列表：　

<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="mypic" size="20"/>

7.多行文本框：

<textarea name="" cols="65" rows="5">

      初始内容（可以不写）

</textarea>

8. 隐藏域：

　　用于传递一些信息，比如用户的ip地址等，在网页中是不显示的,只要写在from标签内就可以

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="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 ...

随机推荐

magic_quotes_runtime 与 magic_quotes_gpc
magic_quotes_runtime 与 magic_quotes_gpc 这两个函数都是管理是否对数据进行特殊符号转义,但是他们针对的处理对象不同: magic_quotes_gpc的设定值将会 ...
sublime text3 插件安装
安装Package control 先打开安装代码的命令行按 ctrl+~或者 view -> show console 将下面的代码粘贴到输入框里按回车 import urllib.re ...
Web流程
Web阻塞加载,异步加载. 延迟执行,立即执行. 加载并执行,不要调用代码. 加载并执行时会调用代码,但是加载并执行时不要调用代码,否则会改变逻辑. 上面是Web流程,JS只是web的一部分.如果关注 ...
iOS7 状态栏修改为白色字体的步骤
1在Info.plist中设置UIViewControllerBasedStatusBarAppearance 为NO2 在需要改变状态栏颜色的ViewController中在ViewDidLoad方 ...
实现WMSservice的时候，出现边缘的点或icon被切断的情况
可以通过为实际查询的boundary加一个buffer,使查询的范围比指定的大一点点,这样就会使tile之间在查询的时候有一定的重叠. 如:Geometry queryBoundary = JTS.t ...
Python日志输出——logging模块
Python日志输出——logging模块标签: loggingpythonimportmodulelog4j 2012-03-06 00:18 31605人阅读评论(8) 收藏举报分类: P ...
ES6中的高阶函数：如同 a => b => c 一样简单
作者:Sequoia McDowell 2016年01月16日 ES6来啦!随着越来越多的代码库和思潮引领者开始在他们的代码中使用ES6,以往被认为是"仅需了解"的ES6特性变成了 ...
DotNetBar之SupergridControl显示图片，行距自动调整
DotNetBar第三方控件SupergridControl中显示图片 1.设置SuperGridControl: SuperGridControl的GridColumn的EditorType设置为: ...
饶有兴致的用javascript做了个贪食蛇游戏
09年写的东西.一直藏在自己的记事本里头,现在开始整理写博客,所以直接搬过来先上效果图再添代码: <HTML> <HEAD> <TITLE>贪吃蛇 Snake ...
poj 1085 Triangle War 博弈论+记忆化搜索
思路:总共有18条边,9个三角形. 极大极小化搜索+剪枝比较慢,所以用记忆化搜索!! 用state存放当前的加边后的状态,并判断是否构成三角形,找出最优解. 代码如下: #include<ios ...

html_表单

html_表单的更多相关文章

随机推荐

热门专题