⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 037_html_form.html

📁 学习时曾经用到的资料
💻 HTML
📖 第 1 页 / 共 2 页
字号:
🔍
12 
<html>
<head>
<title>HTML表单(Forms)-HTML教程-网页教程与代码的中文站点-布啦布啦-blabla.cn</title>
<meta name="author" content="布啦布啦 www.blabla.cn">
<meta name="keywords" content="HTML表单, html form, checkbox, radio, input, password, select, option,HTML代码,HTML教程,网页教程和代码的中文网站,网页制作,源代码,示例,布啦布拉,blabla.cn,examples">
<meta name="description" content="-网页教程与代码的中文站点-网页制作-布啦布啦-blabla.cn">
<meta name="generator" content="blabla buildsite v2.0 - C:\CodeBank\BLABLA\blablasource\webtutorials\100_html\037_html_form.txt">
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="../styles/bla01.css" type="text/css">

<script type="text/javascript">
function WsFvt() {
    window.external.addFavorite(
        "../default.htm", 
        "布啦布啦网页教程与代码[www.blabla.cn]");
}

function WsHome() {
    event.srcElement.style.behavior = "url(#default#homepage)";
    event.srcElement.setHomePage("../default.htm");
}

function WsActOn() {
    event.srcElement.className = "wsacton";
}

function WsAct() {
    event.srcElement.className = "wsact";
}

</script>
</head>
<body class=wsbody>

<div class=wsheader>
<table cellpadding=0 cellspacing=0 class=wslogoarea>
<td class=ws_a1><img src="../images/logo/blabla_logo01.gif" class=blablalogo03></td>
<td class=ws_a2>
<div>
<font class=wsact onmouseover="WsActOn()" onmouseout="WsAct()" onclick="WsFvt()">加入收藏</font> |
<font class=wsact onmouseover="WsActOn()" onmouseout="WsAct()" onclick="WsHome()">设为首页</font>|
<a href="mailto:webmaster@blabla.cn">联系我们</a>
</div>
<div style = "height:20px;"></div>
<div>
<a href="index.html">HTML教程</a> |
<a href="100_html_examples.html">HTML示例代码</a> |
<a href="../css_tutorials/index.html">CSS教程</a> |
<a href="../css_tutorials/100_CSS_examples.html">CSS示例代码</a> |
<a href="../js_tutorials/index.html">Javascript教程</a> |
<a href="../js_tutorials/100_js_examples.html">Javascript示例代码</a>
</div>
</td>
</tr></table>
</div>

<div class=wscontent>
<table cellpadding=0 cellspacing=0 class=wscgrid>
<td class=a1>
<div class=wsmenu><div class=box><div class=box>
<!--menupart Start  -->
<a href = "../index.html"><H1>网站首页</H1></a>
<a href = "index.html" ><H1>HTML网页教程与代码</H1></a><a href = "001_HTML_Overview.html" ><P>HTML基本概念</P></a><a href = "005_Basic_HTML_Tags.html" ><P>HTML基础Tag</P></a><a href = "010_Format_Tags.html" ><P>HTML常用格式</P></a><a href = "015_HTML_entities.html" ><P>HTML特殊字符</P></a><a href = "020_HTML_links.html" ><P>HTML超链接(Hyperlinks)</P></a><a href = "022_html_path.html" ><P>HTML相对和绝对路径</P></a><a href = "025_HTML_tables.html" ><P>HTML表格(Tables)</P></a><a href = "030_html_frame.html" ><P>HTML框架(Frames)</P></a><a href = "035_html_list.html" ><P>HTML列表(Lists)</P></a><a href = "037_html_form.html" ><P><B>HTML表单(Forms)</B></P></a><a href = "040_html_image.html" ><P>HTML图片(Images)</P></a><a href = "042_html_font.html" ><P>HTML字体(Fonts)</P></a><a href = "045_html_bgcolor_background.html" ><P>HTML背景颜色和图片</P></a><a href = "047_html_head.html" ><P>HTML头部信息(Head)</P></a><a href = "050_html_color_ref.html" ><P>HTML颜色参考(Color)</P></a><a href = "100_html_examples.html" ><P>HTML演示示例代码</P></a><a href = "../html_ref/index.html" ><H1>HTML参考(Reference)</H1></a><a href = "../html_tag_ref/index.html" ><P>HTML元素参考</P></a><a href = "../html_attr_ref/index.html" ><P>HTML属性参考</P></a><a href = "../css_tutorials/index.html" ><H1>CSS教程和代码</H1></a><a href = "../css_tutorials/001_CSS_Overview.html" ><P>CSS简介</P></a><a href = "../css_tutorials/005_CSS_Syntax.html" ><P>CSS语法</P></a><a href = "../css_tutorials/010_css_font.html" ><P>CSS常用字体属性(font)</P></a><a href = "../css_tutorials/015_css_text.html" ><P>CSS常用文本属性</P></a><a href = "../css_tutorials/020_CSS_background.html" ><P>CSS常用背景属性</P></a><a href = "../css_tutorials/025_css_border.html" ><P>CSS常用边框属性(border)</P></a><a href = "../css_tutorials/030_css_margin.html" ><P>CSS边距属性(margin)</P></a><a href = "../css_tutorials/035_css_padding.html" ><P>CSS间隙属性(padding)</P></a><a href = "../css_tutorials/040_css_diff_border_margin_padding.html" ><P>边框/边距/间隙的区别</P></a><a href = "../css_tutorials/045_css_list_style.html" ><P>CSS列表属性(list-style)</P></a><a href = "../css_tutorials/050_pseudo_class.html" ><P>CSS常用伪类(pseudo-class)</P></a><a href = "../css_tutorials/060_css_length_unit.html" ><P>CSS长度单位参考</P></a><a href = "../css_tutorials/100_CSS_examples.html" ><P>CSS演示示例代码</P></a><a href = "../js_tutorials/index.html" ><H1>Javascript教程和代码</H1></a><a href = "../js_tutorials/001_js_overview.html" ><P>Javascript简介</P></a><a href = "../js_tutorials/020_js_where2write.html" ><P>Javascript写在哪里</P></a><a href = "../js_tutorials/025_js_variables.html" ><P>Javascript变量(Variables)</P></a><a href = "../js_tutorials/090_js_reserved_words.html" ><P>Javascript保留字</P></a><a href = "../js_tutorials/100_js_examples.html" ><P>Javascript入门代码示例</P></a><a href = "../js_tutorials/101_js_dom_examples.html" ><P>Javascript DOM代码示例</P></a><a href = "../ref/index.html" ><H1>参考(Reference)</H1></a><a href = "../ref/ascii.html" ><P>ASCII编码表</P></a><a href = "../ref/iso_latin_1.html" ><P>ISO Latin-1字符集</P></a>
<!--menupart end  -->
</div></div></div>
</td>
<td class=a2><div class=wsarticle><div class=articlepart id = ap>
<div class=wstitle><div class=box><div class=box><h1>HTML表单(Forms)</h1></div></div></div>
<!--articlepart start-->
<div class = changefont>
<span onclick= "ap.className='ArticlePartBig';"  class = bfont>大字体</span>
<span onclick= "ap.className='ArticlePart';"  class = sfont>小字体</span>
</div>
<P>HTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。</P><P>举个简单的例子，一个让用户输入姓名的HTML表单(Form)。示例代码如下：</P><PRE>&lt;form action="http://www.blabla.cn/asdocs/html_tutorials/yourname.asp" method="get"&gt;</PRE><PRE>请输入你的姓名：</PRE><PRE>&lt;input type="text" name="yourname"&gt;</PRE><PRE>&lt;input type="submit" value="提交"&gt;</PRE><PRE>&lt;/form&gt;</PRE><P><A href="../html_examples/053_form_input_text.html">演示示例</A></P><P>学习HTML表单(Form)最关键要掌握的有三个要点：</P><UL><LI>表单控件(Form Controls) <LI>Action <LI>Method</LI></UL><P>先说表单控件(Form Controls)，通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。比如上面的例句里，input type= "text"就是一个表单控件，表示一个单行输入框。</P><P>用户填入表单的信息总是需要程序来进行处理，表单里的action就指明了处理表单信息的文件。比如上面例句里的http://www.blabla.cn/asdocs/html_tutorials/yourname.asp。</P><P>至于method，表示了发送表单信息的方式。method有两个值：get和post。get的方式是将表单控件的name/value信息经过编码之后，通过URL发送(你可以在地址栏里看到)。而post则将表单的内容通过http发送。那什么时候用get，什么时候用post呢？一般是这样来判断的，如果只是为取得和显示数据，用get；一旦涉及数据的保存和更新，那么建议用post。</P><H2>HTML表单(Form)常用控件(Controls)</H2><P>HTML表单(Form)常用控件有：</P><P><TABLE><TBODY><TR class=header><TD>表单控件(Form Contros)</TD><TD>说明</TD></TR><TR><TD>input type="text"</TD><TD>单行文本输入框</TD></TR><TR><TD>input type="submit"</TD><TD>将表单(Form)里的信息提交给表单里action所指向的文件</TD></TR><TR><TD>input type="checkbox"</TD><TD>复选框</TD></TR><TR><TD>input type="radio"</TD><TD>单选框</TD></TR><TR><TD>select</TD><TD>下拉框</TD></TR><TR><TD>textArea</TD><TD>多行文本输入框</TD></TR><TR><TD>input type="password"</TD><TD>密码输入框(输入的文字用*表示)</TD></TR></TBODY></TABLE></P><H3>表单控件(Form Control)：单行文本输入框(input type="text")</H3><P>单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。例句如下：</P><PRE>&lt;input type="text" name="yourname"&gt;</PRE><P><A href="../html_examples/053_form_input_text.html">演示示例</A></P><H3>表单控件(Form Control)：复选框(input type="checkbox")</H3><P>复选框允许用户在一组选项里，选择多个。示例代码：</P><PRE>&lt;input type="checkbox" name="fruit" value ="apple"&gt;苹果&lt;br&gt;</PRE><PRE>&lt;input type="checkbox" name="fruit" value ="orange"&gt;桔子&lt;br&gt;</PRE><PRE>&lt;input type="checkbox" name="fruit" value ="mango"&gt;芒果&lt;br&gt;</PRE><P><A href="../html_examples/055_form_input_check.html">演示示例</A></P><P>用checked表示缺省已选的选项。</P><PRE>&lt;input type="checkbox" name="fruit" value ="orange" checked&gt;桔子&lt;br&gt;</PRE><P><A href="../html_examples/056_form_input_check_checked.html">演示示例</A></P><H3>表单控件(Form Control)：单选框(input type="radio")</H3><P>使用单选框，让用户在一组选项里只能选择一个。示例代码：</P><PRE>&lt;input type="radio" name="fruit" value = "Apple"&gt;苹果&lt;br&gt;</PRE><PRE>&lt;input type="radio" name="fruit" value = "Orange"&gt;桔子&lt;br&gt;</PRE><PRE>&lt;input type="radio" name="fruit" value = "Mango"&gt;芒果&lt;br&gt;</PRE><P><A href="../html_examples/057_form_input_radio.html">演示示例</A></P><P>用checked表示缺省已选的选项。</P><PRE>&lt;input type="radio" name="fruit" value = "Orange" checked&gt;桔子&lt;br&gt;</PRE><P><A href="../html_examples/058_form_input_radio_checked.html">演示示例</A></P><H3>表单控件(Form Control)：下拉框(select)</H3><P>下拉框(Select)既可以用做单选，也可以用做复选。单选例句如下：</P><PRE>&lt;select name="fruit" &gt;</PRE><PRE>&nbsp; &lt;option value="apple"&gt;苹果</PRE><PRE>&nbsp; &lt;option value="orange"&gt;桔子</PRE><PRE>&nbsp; &lt;option value="mango"&gt;芒果</PRE><PRE>&lt;/select&gt;</PRE><P><A href="../html_examples/059_form_select_01.html">演示示例</A></P><P>如果要变成复选，加muiltiple即可。用户用Ctrl来实现多选。例句：</P><PRE>&lt;select name="fruit" multiple&gt;</PRE><P><A href="../html_examples/060_form_select_multiple.html">演示示例</A></P><P>用户还可以用size属性来改变下拉框(Select)的大小。</P><P><A href="../html_examples/061_form_select_multiple_size1.html">演示示例</A></P><H3>表单控件(Form Control)：多行输入框(textarea)</H3><P>多行输入框(textarea)主要用于输入较长的文本信息。例句如下：</P><PRE>&lt;textarea name="yoursuggest" cols ="50" rows = "3"&gt;&lt;/textarea&gt;</PRE><P>其中cols表示textarea的宽度，rows表示textarea的高度。</P><P><A href="../html_examples/062_form_textarea.html">演示示例</A></P><H3>表单控件(Form Control)：密码输入框(input type="password")</H3><P>密码输入框(input type="password")主要用于一些保密信息的输入，比如密码。因为用户输入的时候，显示的不是输入的内容，而是黑点符号。。例句如下：</P><PRE>&lt;input type="password" name="yourpw"&gt;</PRE><P><A href="../html_examples/054_form_input_text_password.html">演示示例</A></P><H3>表单控件(Form Control)：提交(input type="submit")</H3><P>通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。例句如下：</P><PRE>&lt;input type="submit" value="提交"&gt;</PRE><P><A href="../html_examples/053_form_input_text.html">演示示例</A></P><H3>表单控件(Form Control)：图片提交(input type="image")</H3><P>input type=image 相当于 input type=submit，不同的是，input type=image 以一个图片作为表单的提交按钮，其中 src 属性表示图片的路径。</P><PRE>&lt;input type="image" src ="<A href="../images/icons/go.gif">http://www.blabla.cn/images/icons/go.gif</A>" </PRE><PRE>alt = "提交" NAME="imgsubmit"&gt;</PRE><P><a href = "../html_examples/064_form_input_image.html">演示示例</a></P><P>&nbsp;</P><P>&nbsp;</P>
<!--articlepart end-->

</div><div></td>
<td class=a3><div class=wslink>

<div class=wsportrait>
<img src="../images/logo/blabla_logo02.gif" class=blablalogo21>
</div>

<div class=wslgreen><div class=box><div class=box>
<h2>布啦布啦旗下网站</h2>
<p><a href="../index.html">布啦布啦网页教程与代码</a></p>
<p><a href="http://www.wowstory.com">小斧的魔兽世界</a></p>
<p><a href="../wow/index.html">小斧的魔兽世界镜像</a></p>
<p><a href="http://hardware.blabla.cn">数码资讯</a></p>
</div></div></div>


<div style= "background-color:#FFFFF0;
12

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -