📄 html_forms.asp@output=print
字号:
<!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" />
<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>
<p>From <b>http://www.w3schools.com</b> (Copyright Refsnes Data)</p>
<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" />
<input type="submit" value="Submit" />
</form>
<p>
If you type some characters in the text field above, and click the "Submit" button, you will send your input to a
page called "html_form_action.asp". That page will show you the
received input.
</p>
<hr />
<h2>More Examples</h2>
<p><a target="_blank" href="tryit.asp@filename=tryhtml_checkbox">Checkboxes</a><br />
This example demonstrates how to create check-boxes on an HTML page. A user can
select or unselect a checkbox.</p>
<p><a target="_blank" href="tryit.asp@filename=tryhtml_radio">Radio buttons</a><br />
This example demonstrates how to create radio-buttons on an HTML page.</p>
<p><a target="_blank" href="tryit.asp@filename=tryhtml_select2">Simple drop down box</a><br />
This example demonstrates how to create a simple drop-down box on an HTML page. A
drop-down box is a selectable list.</p>
<p><a target="_blank" href="tryit.asp@filename=tryhtml_select3">Another drop down box</a><br />
This example demonstrates how to create a simple drop-down box with a pre-selected value.</p>
<p><a target="_blank" href="showit.asp@filename=tryhtml_textarea">Textarea</a><br />
This example demonstrates how to create a text-area (a multi-line text input control).
A user can write text in the text-area. In a text-area you can write an unlimited number of
characters.</p>
<p><a target="_blank" href="tryit.asp@filename=tryhtml_button">Create a button</a><br />
This example demonstrates how to create a button. On the button you can define
your own text.</p>
<p><a target="_blank" href="tryit.asp@filename=tryhtml_legend">Fieldset around data</a><br />
This example demonstrates how to draw a border with a caption around your data.</p>
<h2>Form Examples</h2>
<p><a target="_blank" href="tryit.asp@filename=tryhtml_form_submit">Form with input fields and
a submit button</a><br />
This example demonstrates how to add a form to a page. The form contains two input fields and
a submit button.</p>
<p><a target="_blank" href="tryit.asp@filename=tryhtml_form_checkbox">Form with checkboxes</a><br />
This form contains three checkboxes, and a submit button.</p>
<p><a target="_blank" href="tryit.asp@filename=tryhtml_form_radio">Form with radio buttons</a><br />
This form contains two radio buttons, and a submit button.</p>
<p><a target="_blank" href="tryit.asp@filename=tryhtml_form_mail">Send e-mail from a form</a><br />
This example demonstrates how to send e-mail from a form.</p>
<hr />
<h2>Form Tags</h2>
<table class="ex" cellspacing="0" border="1" width="100%">
<tr>
<th align="left">Tag</th>
<th align="left">Description</th>
</tr>
<tr>
<td><a href="../tags/tag_form.asp"><form></a></td>
<td> Defines a form for user input</td>
</tr>
<tr>
<td><a href="../tags/tag_input.asp"><input></a></td>
<td>Defines an input field</td>
</tr>
<tr>
<td><a href="../tags/tag_textarea.asp"><textarea></a></td>
<td>Defines a text-area (a multi-line text input control)</td>
</tr>
<tr>
<td><a href="../tags/tag_label.asp"><label></a></td>
<td>Defines a label to a control</td>
</tr>
<tr>
<td><a href="../tags/tag_fieldset.asp"><fieldset></a></td>
<td>Defines a fieldset</td>
</tr>
<tr>
<td><a href="../tags/tag_legend.asp"><legend></a></td>
<td>Defines a caption for a fieldset</td>
</tr>
<tr>
<td><a href="../tags/tag_select.asp"><select></a></td>
<td>Defines a selectable list (a drop-down box)</td>
</tr>
<tr>
<td><a href="../tags/tag_optgroup.asp"><optgroup></a></td>
<td>Defines an option group</td>
</tr>
<tr>
<td><a href="../tags/tag_option.asp"><option></a></td>
<td>Defines an option in the drop-down box</td>
</tr>
<tr>
<td><a href="../tags/tag_button.asp"><button></a></td>
<td>Defines a push button</td>
</tr>
<tr>
<td><isindex></td>
<td class="deprecated">Deprecated. Use <input> instead</td>
</tr>
</table>
<br />
<hr />
<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>
<p>From <b>http://www.w3schools.com</b> (Copyright Refsnes Data)</p>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -