Raj Kumar Explain different forms of text input controls with example.
Explanation
In HTML <input type=" "> is an important element of HTML form. The "type" attribute of input element can be various types, which defines information field. Such as <input type="text" name="name"> gives a text box.
1. <input type="text">:
<input> element of type "text" are used to define a single-line input text field.
example:-
<form>
<label>first name</label><br>
<input type="text" name="firstname"><br>
</form>
2. <input type="password">:
The <input> element of type "password" allow a user to enter the password securely in a webpage. The entered text in password filed converted into "*" or ".", so that it cannot be read by another user.
<form>
<label>Enter Password</label><br>
<input type="Password" name="password">
</form>
3. <input type="submit">:
The <input> element of type "submit" defines a submit button to submit the form to the server when the "click" event occurs.
<form action="">
<label>User name</label><br>
<input type="text" name="firstname"><br>
<label>Enter Password</label><br>
<input type="Password" name="password"><br>
<br><input type="submit" value="submit">
</form>
4. <input type="radio">:
The <input> type "radio" defines the radio buttons, which allow choosing an option between a set of related options. At a time only one radio button option can be selected at a time.
<form> <p>Kindly Select your favorite color</p> <input type="radio" name="color" value="red"> Red <br> <input type="radio" name="color" value="blue"> blue <br> <input type="radio" name="color" value="green">green <br> <input type="radio" name="color" value="pink">pink <br> <input type="submit" value="submit"> </form>
5. <input type="checkbox">:
The <input> type "checkbox" are displayed as square boxes which can be checked or unchecked to select the choices from the given options.
<form>
<label>Enter your Name:</label>
<input type="text" name="name">
<p>Kindly Select your favourite sports</p>
<input type="checkbox" name="sport1" value="cricket">Cricket<br>
<input type="checkbox" name="sport2" value="tennis">Tennis<br>
<input type="checkbox" name="sport3" value="football">Football<br>
<input type="checkbox" name="sport4" value="baseball">Baseball<br>
<input type="checkbox" name="sport5" value="badminton">Badminton<br><br>
<input type="submit" value="submit">
</form>
6. <input type="button">:
The <input> type "button" defines a simple push button, which can be programmed to control a functionally on any event such as, click event.
- <form>
- <input type="button" value="Clcik me " onclick="alert('you are learning HTML')">
- </form>
7. <input type="email">:
The <input> type "email" creates an input filed which allow a user to enter the e-mail address with pattern validation. The multiple attributes allow a user to enter more than one email address.
<form>
<label>Enter your Email address</label>
<input type="email" name="email" required>
<input type="submit">
</form>
Raj Kumar