📄 html_forms.asp
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Forms and Input</title>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Keywords" content="xml,tutorial,html,dhtml,css,xsl,xhtml,javascript,asp,ado,vbscript,dom,sql,colors,soap,php,authoring,programming,training,learning,beginner's guide,primer,lessons,school,howto,reference,examples,samples,source code,tags,demos,tips,links,FAQ,tag list,forms,frames,color table,w3c,cascading style sheets,active server pages,dynamic html,internet,database,development,Web building,Webmaster,html guide" />
<meta name="Description" content="Free HTML XHTML CSS JavaScript DHTML XML DOM XSL XSLT RSS AJAX ASP ADO PHP SQL tutorials, references, examples for web building." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<link rel="stylesheet" type="text/css" href="../stdtheme.css" />
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "../../https@ssl./default.htm" : "../../www./default.htm");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3855518-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</head>
<body>
<a name="top"></a>
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#808080">
<tr>
<td width="234" valign="top">
<a href="../default.htm"><img src="../images/w3default80.jpg" border="0" alt="W3Schools" /></a>
</td>
<th valign="middle" align="left" class="right">
<iframe style="background-color:#808080" src="../banners/bannerframe.asp@adpartner=xmlmaster" height="90" width="728"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
<br /></th>
</tr>
</table>
<table style="margin-left:1px" width="800px" border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="137" class="content" valign="top"><br />
<a class="left" href="../default.asp" target="_top">
<img src="../images/homeicon.gif" border="0" alt="home" /></a>
<a class="left" href="../default.asp" target="_top">
<b>HOME</b></a>
<br /><br />
<b>HTML Basic</b><br />
<a class="left" target="_top" href="default.asp" >HTML HOME</a><br />
<a class="left" target="_top" href="html_intro.asp" >HTML Introduction</a><br />
<a class="left" target="_top" href="html_elements.asp" >HTML Elements</a><br />
<a class="left" target="_top" href="html_primary.asp" >HTML Basic Tags</a><br />
<a class="left" target="_top" href="html_attributes.asp" >HTML Attributes</a><br />
<a class="left" target="_top" href="html_formatting.asp" >HTML Formatting</a><br />
<a class="left" target="_top" href="html_entities.asp" >HTML Entities</a><br />
<a class="left" target="_top" href="html_links.asp" >HTML Links</a><br />
<a class="left" target="_top" href="html_frames.asp" >HTML Frames</a><br />
<a class="left" target="_top" href="html_tables.asp" >HTML Tables</a><br />
<a class="left" target="_top" href="html_lists.asp" >HTML Lists</a><br />
<a class="left" target="_top" href="html_forms.asp" style='font-weight:bold;'>HTML Forms</a><br />
<a class="left" target="_top" href="html_images.asp" >HTML Images</a><br />
<a class="left" target="_top" href="html_backgrounds.asp" >HTML Background</a><br />
<a class="left" target="_top" href="html_colors.asp" >HTML Colors</a><br />
<a class="left" target="_top" href="html_colorsfull.asp" >HTML Colorvalues</a><br />
<a class="left" target="_top" href="html_colornames.asp" >HTML Colornames</a><br />
<br />
<a class="left" target="_top" href="html_quick.asp" >HTML Quick List</a><br />
<br />
<b>HTML Advanced</b><br />
<a class="left" target="_top" href="html_layout.asp" >HTML Layout</a><br />
<a class="left" target="_top" href="html_fonts.asp" >HTML Fonts</a><br />
<a class="left" target="_top" href="html_whyusehtml4.asp" >HTML 4.0 Why</a><br />
<a class="left" target="_top" href="html_styles.asp" >HTML Styles</a><br />
<a class="left" target="_top" href="html_head.asp" >HTML Head</a><br />
<a class="left" target="_top" href="html_meta.asp" >HTML Meta</a><br />
<a class="left" target="_top" href="html_url.asp" >HTML URLs</a><br />
<a class="left" target="_top" href="html_scripts.asp" >HTML Scripts</a><br />
<a class="left" target="_top" href="html_standardattributes.asp" >HTML Attributes</a><br />
<a class="left" target="_top" href="html_eventattributes.asp" >HTML Events</a><br />
<a class="left" target="_top" href="html_urlencode.asp" >HTML URL-encode</a><br />
<a class="left" target="_top" href="html_webserver.asp" >HTML Webserver</a><br />
<a class="left" target="_top" href="html_summary.asp" >HTML Summary</a><br />
<br />
<b>Examples/Quiz</b>
<br />
<a class="left" target="_top" href="html_examples.asp" >HTML Examples</a><br />
<a class="left" target="_top" href="html_quiz.asp" >HTML Quiz</a><br />
<a class="left" target="_top" href="html_exam.asp" >HTML Exam</a><br />
<br />
<b>References</b><br />
<a class="left" target="_top" href="../tags/default.asp">HTML Tag List</a><br />
<a class="left" target="_top" href="../tags/ref_standardattributes.asp">HTML Attributes</a><br />
<a class="left" target="_top" href="../tags/ref_eventattributes.asp">HTML Events</a><br />
<a class="left" target="_top" href="../tags/ref_colornames.asp">HTML Colornames</a><br />
<a class="left" target="_top" href="../tags/ref_ascii.asp">HTML ASCII</a><br />
<a class="left" target="_top" href="../tags/ref_entities.asp">HTML Entities</a><br />
<a class="left" target="_top" href="../tags/ref_urlencode.asp">HTML URL Encode</a><br />
<a class="left" target="_top" href="../tags/ref_httpmessages.asp">HTTP Messages</a><br /><br />
<b>Selected Reading</b><br />
<a class="left" target="_top" href="../browsers/browsers_stats.asp">Web Statistics</a><br />
<a class="left" target="_top" href="../site/site_glossary.asp">Web Glossary</a><br />
<a class="left" target="_top" href="../hosting/default.asp">Web Hosting</a><br />
<a class="left" target="_top" href="../quality/default.asp">Web Quality</a><br /><br />
<a class="left" target="_top" href="../forum/default.asp">W3Schools Forum</a><br /><br />
<a class="left" target="_top" href="../about/about_helping.asp">Helping W3Schools</a><br /><br />
<script type="text/javascript"><!--
google_ad_client = "pub-3440800076797949";
/*LeftLinkUnit*/
google_ad_slot = "4854527104";
google_ad_width = 120;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="../../pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
<td valign="top">
<table style="border: 1px solid gray" width="100%" bgcolor="#FFFFFF" border="0" cellpadding="5" cellspacing="0">
<tr>
<td>
<h1>HTML Forms and Input</h1>
<a href="html_lists.asp"><img border="0" src="../images/btn_previous.gif" width="100" height="20" alt="Previous" /></a>
<a href="html_images.asp"><img border="0" src="../images/btn_next.gif" width="100" height="20" alt="Next" /></a>
<hr />
<p class="intro">HTML Forms are used to select different kinds of user input.</p>
<hr />
<h2>Examples</h2>
<p><a target="_blank" href="tryit.asp@filename=tryhtml_input">Text fields</a><br />
This example demonstrates how to create text fields on an HTML page. A user can
write text in a text field.</p>
<p><a target="_blank" href="tryit.asp@filename=tryhtml_inputpassword">Password fields</a><br />
This example demonstrates how to create a password field on an HTML page.</p>
<p>(You can find more examples at the bottom of this page)</p>
<hr />
<h2>Forms</h2>
<p>A form is an area that can contain form elements.</p>
<p>Form elements are elements that allow the user to enter information (like text
fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a
form.</p>
<p>A form is defined with the <form> tag.</p>
<table width="100%" class="ex" cellspacing="0" border="1">
<tr>
<td>
<pre><form>
<input>
<input>
</form></pre>
</td>
</tr>
</table>
<br />
<hr />
<h2>Input</h2>
<p>The most used form tag is the <input> tag. The type of input is specified
with the type attribute. The most commonly used input types are explained below.</p>
<h3>Text Fields</h3>
<p>Text fields are used when you want the user to type letters, numbers,
etc. in a form.</p>
<table width="100%" class="ex" cellspacing="0" border="1">
<tr>
<td>
<pre><form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form></pre>
</td>
</tr>
</table>
<p>How it looks in a browser:</p>
<form action="">
First name:
<input type="text" name="firstname" size="20" />
<br />
Last name:
<input type="text" name="lastname" size="20" />
</form>
<p>Note that the form itself is not visible. Also note that in most browsers, the
width of the text field is 20 characters by default.
</p>
<h3>Radio Buttons</h3>
<p>Radio Buttons are used when you want the user to select one of a limited number of choices.</p>
<table width="100%" class="ex" cellspacing="0" border="1">
<tr>
<td>
<pre><form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form></pre>
</td>
</tr>
</table>
<p>How it looks in a browser:</p>
<form action="">
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>
<p>Note that only one option can be chosen.
</p>
<h3>Checkboxes
</h3>
<p>Checkboxes are used when you want the user to select one or more options of a limited number of choices.</p>
<table width="100%" class="ex" cellspacing="0" border="1">
<tr>
<td>
<pre><form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike">
<br>
I have a car:
<input type="checkbox" name="vehicle" value="Car">
<br>
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane">
</form></pre>
</td>
</tr>
</table>
<p>How it looks in a browser:</p>
<form action="">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
</form>
<hr />
<h2>The Form's Action Attribute and the Submit Button</h2>
<p>When the user clicks on the "Submit" button, the content of the form is
sent to another file. The form's action attribute defines the name of the file
to send the content to. The file defined in the action attribute usually does
something with the received input.</p>
<table width="100%" class="ex" cellspacing="0" border="1">
<tr>
<td>
<pre><form name="input" action="html_form_action.asp"
method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form></pre>
</td>
</tr>
</table>
<p>How it looks in a browser:</p>
<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user" size="20" />
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -