More Input Types

Lecture 27:- More Input Types

Forms in HTML allow users to enter and submit data to a web server for processing. A simple form can be created using the following code:

phpCopy code

<form action="[URL to submit data to]">  <label for="name">Name:</label>  <input type="text" id="name" name="name">  <br><br>  <label for="email">Email:</label>  <input type="email" id="email" name="email">  <br><br>  <input type="submit" value="Submit"> </form>

In HTML, there are several different types of input fields that can be used in forms, including:

• text: A single-line text input field.
• email: An input field for email addresses that may have certain validation rules, such as requiring an @ symbol.
• password: An input field for password entry that hides the text as it is typed.
• radio: A radio button that allows the user to select one option from a group of options.
• checkbox: A checkbox that allows the user to select one or more options from a group of options.
• submit: A submit button to submit the form.
• reset: A reset button to reset the form to its default values.
• hidden: A hidden input field that can be used to store data that should not be visible to the user.
• file: An input field for file uploads.
• image: An input field for image submit buttons.
• textarea: A multi-line text input field.
• select: A drop-down list for selecting one or more options from a list.

Here is an example of a form that contains multiple input fields of different types:

phpCopy code

<form action="[URL to submit data to]">  <label for="name">Name:</label>  <input type="text" id="name" name="name">  <br><br>  <label for="email">Email:</label>  <input type="email" id="email" name="email">  <br><br>  <label for="password">Password:</label>  <input type="password" id="password" name="password">  <br><br>  <label for="gender">Gender:</label>  <input type="radio" id="male" name="gender" value="male">  <label for="male">Male</label>  <input type="radio" id="female" name="gender" value="female">  <label for="female">Female</label>  <br><br>  <label for="hobbies">Hobbies:</label>  <input type="checkbox" id="reading" name="hobbies" value="reading">  <label for="reading">Reading</label>  <input type="checkbox" id="traveling" name="hobbies" value="traveling">  <label for="traveling">Traveling</label>  <br><br>  <label for="message">Message:</label>  <textarea id="message" name="message"></textarea>  <br><br>  <input type="submit" value="Submit">  <input type="reset" value="Reset"> </form>