source: www/manuals/html_manual/forms/input.html@ 1

Last change on this file since 1 was 1, checked in by george, 17 years ago

Prvotní import všeho
File size: 22.0 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
2 "http://www.w3.org/TR/REC-html40/strict.dtd">
3<html lang=en>
4<head>
5<title>INPUT - Form Input</title>
6<link rev=Made href="mailto:liam@htmlhelp.com">
7<link rel=Start href="../index.html">
8<link rel=Glossary href="http://www.htmlhelp.com/glossary/glossary.html">
9<link rel=Copyright href="http://www.htmlhelp.com/copyright.html">
10<link rel=StyleSheet href="../style.css" type="text/css">
11<link rel=StyleSheet href="../aural.css" type="text/css" media=aural>
12<meta http-equiv="Content-Script-Type" content="text/javascript">
13<meta name="author" content="Liam Quinn">
14<meta name="description" content="A description of HTML 4.0's INPUT element for form input.">
15<meta name="keywords" content="INPUT, input element, form input, input, text, password, checkbox, radio button, radio, file, type, submit, reset, button, hidden, image, check box, field, form field, fields, HyperText Markup Language, HTML, HTML4, HTML 4.0, Web Design Group, WDG, &lt;input&gt; tag, &lt;INPUT&gt; tag">
16<script type="text/javascript">
17<!--
18function toggle() {
19 if (document.all.toggler.value == "Hide non-strict attributes") {
20 document.styleSheets[0].addRule("div.transitional", "display:none");
21 document.styleSheets[0].addRule("li.transitional", "display:none");
22 document.styleSheets[0].addRule(".transitional", "speak:none");
23 document.all.toggler.value = "Show non-strict attributes";
24 } else {
25 document.styleSheets[0].addRule("div.transitional", "display:block");
26 document.styleSheets[0].addRule("li.transitional", "display:list-item");
27 document.styleSheets[0].addRule(".transitional", "speak:inherit");
28 document.all.toggler.value = "Hide non-strict attributes";
29 }
30}
31// -->
32</script>
33</head>
34<body>
35<h2><img src="../wdglogo1.gif" width=250 height=83 alt="The Web Design Group"></h2>
36<h1>INPUT - Form Input</h1>
37<script type="text/javascript">
38<!--
39 if (document.styleSheets) {
40 var gt;
41 gt = unescape(new String("%3E"));
42
43 document.write("<p" + gt + "<input type=button value=\"Hide non-strict attributes\" id=toggler accesskey=s onclick=\"toggle()\"" + gt + "<\/p" + gt);
44 }
45// -->
46</script>
47<table>
48 <tr valign=top>
49 <th>Syntax</th>
50 <td><strong class=required>&lt;INPUT&gt;</strong></td>
51 </tr>
52 <tr valign=top>
53 <th>Attribute Specifications</th>
54 <td>
55 <ul>
56 <li>TYPE=[ <em class=default>text</em> | password | checkbox | radio | submit | reset | file | hidden | image | button ] (type of input)</li>
57 <li>NAME=<var><a href="../values.html#cdata">CDATA</a></var> (key in submitted form)</li>
58 <li>VALUE=<var><a href="../values.html#cdata">CDATA</a></var> (value of input)</li>
59 <li>CHECKED (check radio button or checkbox)</li>
60 <li>SIZE=<var><a href="../values.html#cdata">CDATA</a></var> (suggested number of characters for text input)</li>
61 <li>MAXLENGTH=<var><a href="../values.html#number">Number</a></var> (maximum number of characters for text input)</li>
62 <li>SRC=<var><a href="../values.html#uri">URI</a></var> (source for image)</li>
63 <li>ALT=<var><a href="../values.html#cdata">CDATA</a></var> (alternate text for image input)</li>
64 <li>USEMAP=<var><a href="../values.html#uri">URI</a></var> (client-side image map)</li>
65 <li class=transitional>ALIGN=[ top | middle | bottom | left | right ] (alignment of image input)</li>
66 <li>DISABLED (disable element)</li>
67 <li>READONLY (prevent changes)</li>
68 <li>ACCEPT=<var><a href="../values.html#contenttypes">ContentTypes</a></var> (media types for file upload)</li>
69 <li>ACCESSKEY=<var><a href="../values.html#character">Character</a></var> (shortcut key)</li>
70 <li>TABINDEX=<var><a href="../values.html#number">Number</a></var> (position in tabbing order)</li>
71 <li>ONFOCUS=<var><a href="../values.html#script">Script</a></var> (element received focus)</li>
72 <li>ONBLUR=<var><a href="../values.html#script">Script</a></var> (element lost focus)</li>
73 <li>ONSELECT=<var><a href="../values.html#script">Script</a></var> (element text selected)</li>
74 <li>ONCHANGE=<var><a href="../values.html#script">Script</a></var> (element value changed)</li>
75 <li><a href="../attrs.html">common attributes</a></li>
76 </ul>
77 </td>
78 </tr>
79 <tr valign=top>
80 <th>Contents</th>
81 <td>Empty</td>
82 </tr>
83 <tr valign=top>
84 <th>Contained in</th>
85 <td><a href="../block.html">Block-level elements</a>, <a href="../inline.html">inline elements</a> except <a href="button.html">BUTTON</a></td>
86 </tr>
87</table>
88<p>The <strong class=html>INPUT</strong> element defines a <em>form control</em> for the user to enter input. While <strong class=html>INPUT</strong> is most useful within a <strong class=html><a href="form.html">FORM</a></strong>, HTML 4.0 allows <strong class=html>INPUT</strong> in any <a href="../block.html">block-level</a> or <a href="../inline.html">inline</a> element other than <strong class=html><a href="button.html">BUTTON</a></strong>. However, <a href="http://www.netscape.com/navigator/">Netscape Navigator</a> will not display any <strong class=html>INPUT</strong> elements outside of a <strong class=html>FORM</strong>.</p>
89<p>When a form is submitted, the current value of each <strong class=html>INPUT</strong> element within the <strong class=html><a href="form.html">FORM</a></strong> is sent to the server as name/value pairs. The <strong class=html>INPUT</strong> element's <strong class=html>NAME</strong> attribute provides the name used. The value sent depends on the type of form control and on the user's input.</p>
90<p>The type of form control defined by <strong class=html>INPUT</strong> is given by the <strong class=html>TYPE</strong> attribute. The default <strong class=html>TYPE</strong> is <strong class=html>text</strong>, which provides a single-line text input field. The <strong class=html>VALUE</strong> attribute specifies the initial value for the text field. The <strong class=html>SIZE</strong> and <strong class=html>MAXLENGTH</strong> attributes suggest the number of characters and maximum number of characters, respectively, of the text field.</p>
91<p class=note>While the <strong class=html>MAXLENGTH</strong> attribute can be an effective guide to the user, authors should not depend on the enforcement of a maximum number of characters by the client. A user could copy the <abbr class=initialism title="HyperText Markup Language">HTML</abbr> document, remove the <strong class=html>MAXLENGTH</strong> attribute, and submit the form. Thus authors of form handlers should ensure that any necessary input length checks are repeated on the server-side.</p>
92<p>The <strong class=html>password</strong> input type is a variation on the <strong class=html>text</strong> type. The only difference is that the input characters are masked, typically by a series of asterisks, to protect sensitive information from onlookers. Note, however, that the actual value is transmitted to the server as clear text, so <strong class=html>password</strong> inputs do not provide sufficient security for credit card numbers or other highly sensitive information.</p>
93<p>The following example uses <strong class=html>text</strong> and <strong class=html>password</strong> fields with the <strong class=html><a href="label.html">LABEL</a></strong> element to bind text labels to the <strong class=html>INPUT</strong> elements:</p>
94<p class=example><code class=html>&lt;P&gt;&lt;LABEL ACCESSKEY=U&gt;User name: <strong>&lt;INPUT TYPE=text NAME=username SIZE=8 MAXLENGTH=8&gt;</strong>&lt;/LABEL&gt;&lt;/P&gt;<br>&lt;P&gt;&lt;LABEL ACCESSKEY=P&gt;Password: <strong>&lt;INPUT TYPE=password NAME=pw SIZE=12 MAXLENGTH=12&gt;</strong>&lt;/LABEL&gt;&lt;/P&gt;</code></p>
95<p>The boolean <strong class=html>READONLY</strong> attribute, new in HTML 4.0 and poorly supported by current browsers, prevents the user from editing the content of the <strong class=html>text</strong> or <strong class=html>password</strong> input types. Read-only elements are still submitted with the form. The <strong class=html>DISABLED</strong> attribute, which applies to all input types but is also poorly supported, disables the control. Disabled elements are read-only elements with the added restrictions that the values are not submitted with the form, the elements cannot receive focus, and the elements are skipped when navigating the document by tabbing.</p>
96<p>The <strong class=html>radio</strong> and <strong class=html>checkbox</strong> input types provide switches that can be turned on and off by the user. The two types differ in that radio buttons are grouped (by specifying the same <strong class=html>NAME</strong> attribute on each <strong class=html>INPUT</strong>) so that only one radio button in a group can be selected at any time. Checkboxes can be checked without changing the state of other checkboxes with the same <strong class=html>NAME</strong>. The <strong class=html>VALUE</strong> attribute, required for radio buttons and checkboxes, gives the value of the control when it is checked. The boolean <strong class=html>CHECKED</strong> attribute specifies that the control is initially checked.</p>
97<p class=note>Some browsers require one radio button in a group to be selected at all times. To ensure that an appropriate default choice is made, authors may wish to define one of the radio <strong class=html>INPUT</strong> elements as <strong class=html>CHECKED</strong>.</p>
98<p>In the following example, only one payment method may be selected by the user since the radio buttons have the same <strong class=html>NAME</strong>:</p>
99<div class=example>
100<p><code class=html>&lt;P&gt;Please indicate your method of payment:&lt;/P&gt;<br>&lt;P&gt;&lt;LABEL ACCESSKEY=C&gt;<strong>&lt;INPUT TYPE=radio NAME="payment_method" VALUE="credit card" CHECKED&gt;</strong> Credit card&lt;/LABEL&gt;&lt;BR&gt;<br>&lt;LABEL ACCESSKEY=D&gt;<strong>&lt;INPUT TYPE=radio NAME="payment_method" VALUE="debit card"&gt;</strong> Debit card&lt;/LABEL&gt;&lt;BR&gt;<br>&lt;LABEL ACCESSKEY=M&gt;<strong>&lt;INPUT TYPE=radio NAME="payment_method" VALUE="money order"&gt;</strong> Money order&lt;/LABEL&gt;&lt;/P&gt;</code></p>
101<p><code class=html>&lt;P&gt;&lt;LABEL ACCESSKEY=S&gt;<strong>&lt;INPUT TYPE=checkbox NAME="send_receipt" VALUE="yes" CHECKED&gt;</strong> Send receipt by e-mail&lt;/LABEL&gt;&lt;/P&gt;</code></p>
102</div>
103<p>The <strong class=html>file</strong> input type creates a field through which users can upload files from their local computer or network. The <strong class=html>VALUE</strong> attribute specifies the name of the initial file, but it is typically ignored by browsers as a security precaution. The <strong class=html>ACCEPT</strong> attribute gives a comma-separated list of media types accepted, allowing the browser to filter out inappropriate files. Current browsers generally ignore the <strong class=html>ACCEPT</strong> attribute.</p>
104<p>A form that includes a <strong class=html>file</strong> <strong class=html>INPUT</strong> must specify <strong class=html>METHOD=post</strong> and <strong class=html>ENCTYPE="multipart/form-data"</strong> in the <strong class=html>&lt;FORM&gt;</strong> tag. <abbr class=initialism title="Common Gateway Interface">CGI</abbr> libraries such as <a href="http://www-genome.wi.mit.edu/ftp/pub/software/WWW/cgi_docs.html" title="CGI.pm - a Perl5 CGI Library">CGI.pm</a> allow simple handling of such forms.</p>
105<p class=note>Form-based file upload is unsupported by many currently deployed browsers. Authors should provide alternative methods of input where possible.</p>
106<p>The following example allows the user to upload an <abbr class=initialism title="HyperText Markup Language">HTML</abbr> document for validation:</p>
107<p class=example><code class=html>&lt;FORM METHOD=post ACTION="/cgi-bin/validate.cgi" ENCTYPE="multipart/form-data"&gt;<br>&lt;P&gt;Select an HTML document to upload and validate. If your browser does not support form-based file upload, use one of our &lt;A HREF="methods.html"&gt;alternate methods of validation&lt;/A&gt;.&lt;/P&gt;<br>&lt;P&gt;<strong>&lt;INPUT TYPE=file NAME="html_file" ACCEPT="text/html"&gt;</strong>&lt;/P&gt;<br>&lt;P&gt;&lt;INPUT TYPE=submit VALUE="Validate it!"&gt;&lt;/P&gt;<br>&lt;/FORM&gt;</code></p>
108<p>The <strong class=html>hidden</strong> input type allows authors to include form data without having it rendered to the user. This is particularly useful in form applications that span several <abbr class=initialism title="HyperText Markup Language">HTML</abbr> documents; user input can be carried from form to form by <strong class=html>hidden</strong> <strong class=html>INPUT</strong>s. Some generalized <abbr class=initialism title="Common Gateway Interface">CGI</abbr> scripts use <strong class=html>hidden</strong> <strong class=html>INPUT</strong>s to define variables for the script, as in the following example, which defines a recipient and subject for the e-mailed contents of a form:</p>
109<p class=example><code class=html>&lt;INPUT TYPE=hidden NAME=recipient VALUE="liam@htmlhelp.com"&gt;<br>&lt;INPUT TYPE=hidden NAME=subject VALUE="Feedback on your HTML Reference"&gt;</code></p>
110<p class=note>Note that the fields are "hidden" in the sense that they are not rendered by the browser. Anyone can still view the <abbr class=initialism title="HyperText Markup Language">HTML</abbr> document's source to find the "hidden" fields.</p>
111<p>The <strong class=html>TYPE</strong> value <strong class=html>reset</strong> defines a button by which the user can reset the form to its initial values. The optional <strong class=html>VALUE</strong> attribute of a reset button overrides the browser's default text for the button.</p>
112<p>The <strong class=html>submit</strong> input type defines a button for submitting the form. As with <strong class=html>reset</strong>, the optional <strong class=html>VALUE</strong> attribute provides the text of the button. The presence of the <strong class=html>NAME</strong> attribute will cause the browser to send a name/value pair for the submit button if it is used to submit the form. This allows authors to provide multiple submit buttons and have the form handler take a different action depending on the submit button used.</p>
113<p>The <strong class=html>image</strong> input type specifies a graphical submit button. The <strong class=html>SRC</strong> attribute must be included to specify the <abbr class=initialism title="Uniform Resource Identifier">URI</abbr> of the image. The <strong class=html>ALT</strong> attribute should be used to give replacement text for those not loading images. <strong class=html>ALT</strong> is a new addition in HTML 4.0; many browsers rely on either the <strong class=html>NAME</strong> or <strong class=html>VALUE</strong> attribute as alternate text, so authors should use all three attributes for the same purpose where possible. The topic of graphical submit buttons for text users is discussed in detail in the article <cite><a href="http://www.htmlhelp.com/feature/art3c.htm">INPUT TYPE=IMAGE for text users?</a></cite>.</p>
114<p>When the graphical submit button is clicked, the coordinates of the click are sent with the form submission as <var>name</var>.x=<var>x-value</var> and <var>name</var>.y=<var>y-value</var> where <var>name</var> is the value of the <strong class=html>NAME</strong> attribute, <var>x-value</var> is the click's pixels from the left of the image, and <var>y-value</var> is the click's pixels from the top of the image. The <strong class=html>USEMAP</strong> attribute combined with <strong class=html>TYPE=image</strong> defines a client-side image map that can be used with client-side scripting, but this method is poorly supported. The <strong class=html>USEMAP</strong> attribute gives the <abbr class=initialism title="Uniform Resource Identifier">URI</abbr> of the defining <strong class=html><a href="../special/map.html">MAP</a></strong>.</p>
115<div class=transitional>
116<p>The <a href="../deprecated.html">deprecated</a> <strong class=html>ALIGN</strong> attribute specifies the alignment of the graphical submit button. The values <strong class=html>top</strong>, <strong class=html>middle</strong>, and <strong class=html>bottom</strong> specify the button's position with respect to surrounding content on its left and right. The values <strong class=html>left</strong> and <strong class=html>right</strong> specify a <em>floating</em> button; the image is placed at the left or right margin and content flows around it. To place content below the button, use <strong class=html>&lt;BR CLEAR=left|right|all&gt;</strong> as appropriate.</p>
117<p class=note>The <strong class=css><a href="http://www.htmlhelp.com/reference/css/text/vertical-align.html">vertical-align</a></strong> and <strong class=css><a href="http://www.htmlhelp.com/reference/css/box/float.html">float</a></strong> properties of <a href="http://www.htmlhelp.com/reference/css/">Cascading Style Sheets</a> provide more flexible methods of aligning buttons.</p>
118</div>
119<p>The input type <strong class=html>button</strong> specifies a push button for use with client-side scripting. The <strong class=html>VALUE</strong> attribute gives the text label of the button. The <strong class=html>ONCLICK</strong> attribute is typically used to define the action taken when the button is activated. An example follows:</p>
120<p class=example><code class=html>&lt;INPUT TYPE=button VALUE="Hide non-strict attributes" ID=toggler ONCLICK="toggle()"&gt;</code></p>
121<p>In this example, the <strong class=html>toggle()</strong> function, which would be defined earlier in a <strong class=html><a href="../special/script.html">SCRIPT</a></strong> element, will be executed when the button is clicked. Since the button is only useful with client-side scripting enabled, authors should usually output the <strong class=html>&lt;INPUT TYPE=button&gt;</strong> tag using the scripting language to avoid providing a non-functioning button to some users. A more complete version of the previous example would thus be as follows:</p>
122<pre class=example><code class=html>&lt;SCRIPT TYPE="text/javascript"&gt;</code>
123<code class=javascript>&lt;!--
124 document.write("&lt;INPUT TYPE=button VALUE=\"Hide non-strict attributes\""
125 + "ID=toggler ONCLICK=\"toggle()\"&gt;");
126// --&gt;</code>
127<code class=html>&lt;/script&gt;</code></pre>
128<p class=note>The <strong class=html><a href="button.html">BUTTON</a></strong> element allows richer labels for submit, reset, and push buttons, but a lack of browser support makes <strong class=html>INPUT</strong> a more reliable choice at this time.</p>
129<p>The <strong class=html>ACCESSKEY</strong> and <strong class=html>TABINDEX</strong> attributes apply to all input types except <strong class=html>hidden</strong>. <strong class=html>ACCESSKEY</strong> specifies a single Unicode character as a shortcut key for giving focus to the form control. Authors can set the access key on the <strong class=html>INPUT</strong> element or the <strong class=html><a href="label.html">LABEL</a></strong> element associated with it. <a href="../entities/index.html">Entities</a> (<abbr title="for example"><i lang=la>e.g.</i></abbr> <strong class=html>&amp;eacute;</strong>) may be used as the <strong class=html>ACCESSKEY</strong> value.</p>
130<p>The <strong class=html>TABINDEX</strong> attribute specifies a number between 0 and 32767 to indicate the tabbing order of the element. A form control with <strong class=html>TABINDEX=0</strong> or no <strong class=html>TABINDEX</strong> attribute will be visited after any elements with a positive <strong class=html>TABINDEX</strong>. Among positive <strong class=html>TABINDEX</strong> values, the lower number receives focus first. In the case of a tie, the element appearing first in the <abbr class=initialism title="HyperText Markup Language">HTML</abbr> document takes precedence.</p>
131<p>The <strong class=html>INPUT</strong> element also takes a number of attributes to specify client-side scripting actions for various events. In addition to the <a href="../attrs.html#events">core events</a> common to most elements, <strong class=html>INPUT</strong> accepts the following event attributes:</p>
132<ul>
133 <li><strong class=html>ONFOCUS</strong>, when the element receives focus;</li>
134 <li><strong class=html>ONBLUR</strong>, when the element loses focus;</li>
135 <li><strong class=html>ONSELECT</strong>, when text in an input of type <strong class=html>text</strong> or <strong class=html>password</strong> is selected;</li>
136 <li><strong class=html>ONCHANGE</strong>, when the element loses focus and its value has changed since it received focus.</li>
137</ul>
138<h2>More Information</h2>
139<ul>
140 <li><a href="http://www.w3.org/TR/REC-html40/interact/forms.html#edef-INPUT">INPUT in <abbr class=initialism title="World Wide Web Consortium">W3C</abbr> HTML 4.0 Recommendation</a></li>
141 <li><a href="http://www.w3.org/TR/REC-html32#input">INPUT in <abbr class=initialism title="World Wide Web Consortium">W3C</abbr> HTML 3.2 Recommendation</a></li>
142 <li><a href="http://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.1.2">INPUT in HTML 2.0 Standard</a></li>
143 <li><a href="http://www.htmlhelp.com/reference/wilbur/form/input.html">INPUT in <abbr class=initialism title="Web Design Group">WDG</abbr> HTML 3.2 Reference</a></li>
144 <li><a href="http://www.hut.fi/u/jkorpela/HTML3.2/5.32.html">INPUT in <cite>Learning HTML 3.2 by Examples</cite></a></li>
145 <li><a href="http://ds.internic.net/rfc/rfc1867.txt"><abbr class=initialism title="Request for Comments">RFC</abbr> 1867: Form-based File Upload in HTML</a></li>
146</ul>
147<div class=footer>
148<address>Maintained by <a href="http://www.htmlhelp.com/%7Eliam/">Liam Quinn</a> &lt;<a href="mailto:liam@htmlhelp.com">liam@htmlhelp.com</a>&gt;</address>
149<p class=toolbar><a href="http://www.htmlhelp.com/"><img src="../wdglogo-small.gif" width=105 height=40 alt="Web Design Group ~"></a> <a href="../index.html" rel=Start>HTML 4.0 Reference</a> ~ <a href="../olist.html">Elements by Function</a> ~ <a href="../alist.html">Elements Alphabetically</a></p>
150<p class=copyright><a href="http://www.htmlhelp.com/copyright.html">Copyright ©</a> 1998 Liam Quinn. All rights reserved.</p>
151</div>
152</body>
153</html>
Note: See TracBrowser for help on using the repository browser.