Input element in forms

Tweet

Input field is a ten-headed hydra, creating a different form control depending on the value of its type attribute. With just this single element you can create text boxes, checkboxes, radio buttons, and more. There are 10 possible values for the type attribute,

1. text - for single-line text
2. password - for secret text
3. checkbox - for a simple on or off
4. radio button - for selecting one of a number of options
5. submit - for sending the form data
6. reset - for returning the form fields to original values
7. hidden - for data not seen, or edited by, the user
8. image - for sending coordinates of where an image is clicked on
9. file - for uploading files
10. button - for invoking client-side scripts

1.Text

<label>Name</label>
<input name="yearpublished" value="name" maxlength="99" size="20" />
<br />

<label>Email</label>
<input name="email" size="20" maxlength="256" />
<br />

<label>Username</label>
<input name="username" size="20" maxlength="256" />

An input element with the attribute type="text" is a single-line text box. This is the default value for the type attribute, when there is type value on the input element.

The label element is useful to denote what input elements are inside a form. The size attribute is used to define the size of the input text box and the maxlength attribute is used to limit the maximum number of texts inside the input text box.

2.Password

<label>Password</label>
<input type="password" name="passwd" maxlength="256" size="19" />
<br />
        
<label>Password confirmation</label>
<input type="password" name="passcon" maxlength="256" size="19" />

The password value works same like an text value, where the only difference is that the texts are hidden(usally asterisks or circular bullets). This is to protect the users confidential data.

3.Checkbox

<h3>Subscription</h3>
<input type="checkbox" name="top" checked="checked" />
<label>Subscribe to top news</label>
<br />
        
<input type="checkbox" name="tech" />
<label>Subscribe to technology news</label>
<br />
        
<input type="checkbox" name="weather" />
<label>Subscribe to weather news</label>

Checkbox value, produce checkboxes to supply yes/no or on/off option. By default, a browser will style this as a small empty square box, which when selected, will display a "tick" inside box.

To preselect the checkbox, you can use the checked attribute with checked value. Note that, in XHTML the value attribute must be present.

4.Radio

<h3>Vote</h3>
<input type="radio" name="vote" value="excellent" checked="checked" />
<label>Excellent, I love this blog</label>
<br />
        
<input type="radio" name="vote" value="good" />
<label>Yes, it's a good blog</label>
<br />
        
<input type="radio" name="vote" value="average" />
<label>Ahh...this blog is average</label>

The radio buttons are similar to checkboxes, except that you can select only one option in a group at a time.

You need to define the name attribute with a same value to the group of radio buttons. The checked attribute work same like in checkboxes and the value attribute is very necessary here, because without that, the radio buttons work like checkboxes.

5.Submit

<input type="submit" value="Submit" />

The most common and the easiest way of submitting a form is through submit button. When the submit button is pressed, the form will be redirected to the action attribute in the opening form tag.

The default text on the button will be "Submit Query", but this can be changed using the value attribute.

6.Reset

 <input type="reset" value="Reset" />

The reset input type creates a reset button, which, when clicked will reset the form, with form fields returning to the values that they had when the page was first loaded.

Just like submit button, the text on the reset button can be changed with the value attribute. The name attribute is not necessary in both submit and reset buttons.

7.Hidden

<input type="hidden" name="user" value="professor" />
<input type="hidden" name="date-submitted" value="22-05-1990" />

The hidden input type doesn't show up in the form and has nothing that the user can directly interact with.

The use of hidden attribute is that it can send hidden values along with the other datas in the form. Some example values are, sending date of form submission, sending order id, etc... But, you must remember, that you should not use this to hide confidential values, as any user who knows how to access the source code of a page, can easily take the data.

8.Image

<input type="text" name="search" size="19" maxlength="1000" />
<input type="image" src="search_button.png" />

The image type is a cross between a submit type and img element. The source of the image should be noted with a src attribute and an alternate text for the image can be used with alt attribute.

9.File

<form action="preprocessor.php" method="post" enctype="multipart/form-data">
        
<input type="file" name="uploadfile" id="uploadfile" />
        
</form>

The file type allows user to select a file from their own computers, to upload a file.

To use file type value, an additional enctype attribute must be added to the opening form tag with the value "multipart/form-data", so that when it is sent the server knows that it is getting more than textual data. The method attribute must also be sent to post.

10.Button

The button element does nothing except displaying a visible button on a webpage. It is only useful for client-side scripting(such as Javascript). When a button is pressed, they do not submit the form but dynamically alter the value of the text box such as calculators and much more.