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:
