How to Use “input” Element for Text ,Password ,Radio ,Checkbox and Submit Button in HTML

The <Input> Element is the most important element which is used to select information. It can vary in many ways, depending on the type of attribute.

Following are the most common input types.

Create Text Fields

<input type=”text”> defines a one-line input field that a user can enter text into:

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

Result of the above HTML code in a browser:


First name: 
Last name:  

Note: The form tag is not visible and the default width of a text field is 20 characters.

Create Password Field


<input type=”password”> defines a password field:

<form>
Password: <input type="password" name="pwd" value="password">
</form>

Result of the above HTML code in a browser:

Password: 

Note: The characters in a password field are masked (shown as asterisks or circles).

Create Radio Buttons

<input type=”radio”> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:

<form>
<input type="radio" name="category" value="male">Male<br>
<input type="radio" name="category" value="female">Female
</form>

Result of the above HTML code in a browser:

Male
Female

Create Checkboxes

<input type=”checkbox”> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

Result of the above HTML code in a browser:

I have a bike
I have a car

Create Submit Button

<input type="submit"> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page specified in the form’s action attribute. The file defined in the action attribute usually does something with the received input:

<form name="input" action="html_Code_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

Result of the above HTML code in a browser:

Username: 

If you type some characters in the text field above, and click the “Submit” button, the browser will send your input to a page called “html_ Code _form_action.asp”. The page will show you the received input.

You can download following example to test the above code.

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript can change the style of an HTML element.</h1>
<p id="demo">
Change the color of this Text.
</p>
<script>
function myFunction()
{
x=document.getElementById("sample") // Find the element
x.style.color="#3ca9d0";          // Change the style
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

<form>
Password: <input type="password" name="pwd">
</form>

<form>
<input type="radio" name="category" value="male">Male<br>
<input type="radio" name="category" value="female">Female
</form>

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">

</form>
</body>
</html>

Result of the above example:

Create Text Field
If you have any suggestion/query, feel free to comment below.

Get Free Blogging Tips & Technology updates in your Email !!!

Subscribe via RSS feed

The following two tabs change content below.
Anil Kumar
IT Blogger Tips focus on Blogging Tips, SEO Tips, Social Media, SQL Tips, PL/SQL Tips, Oracle DBA, Linux/Unix, Latest Technology, How Tos and Technical Solutions. You can find us on Facebook | Twitter |
Find on Google+

Siteground SALE
60% OFF SiteGround WordPress Hosting – $3.95/month (Exclusive Offer !!!)