Updates
  • Starting New Weekday Batch for Full Stack Java Development on 15 September 2025 @ 02:00 PM to 04:00 PM
  • Starting New Weekday Batch for MERN Stack Development on 29 September 2025 @ 04:00 PM to 06:00 PM
Number Converter Enquire Now
Join Course

HTML Forms

The <form> element is used to create a form on a webpage to collect user input.

Form Attribute

• Action Attribute: The action attribute in the <form> tag specifies the URL where the form data should be sent when the user submits the form.
• Method Attribute: The method attribute in the <form> tag specifies the HTTP method (GET or POST) used to send the form data to the server.
• Name Attribute: The name attribute in input elements, like <input> and <textarea>, provides a unique name for the form field, allowing the data to be identified on the server-side.
• Type Attribute: The type attribute in the <input> tag specifies the type of input control, such as text, password, checkbox, radio, etc.
• Value Attribute: The value attribute in the <input> and <button> tags sets the initial value displayed in the input field or button text.
• Placeholder Attribute: The placeholder attribute in the <input> and <textarea> tags provides a short hint or example text that appears in the input field before the user enters data.
• Required Attribute: The required attribute in the <input> tag specifies that the field must be filled out before the form can be submitted.
• Disabled Attribute: The disabled attribute in the <input>, <textarea>, and <button> tags disables the input field or button, making it unclickable and uneditable.
• Readonly Attribute: The readonly attribute in the <input> and <textarea> tags makes the input field or textarea read-only, preventing users from editing its contents.
• Autofocus Attribute: The autofocus attribute in the <input> tag automatically focuses on the input field when the page loads, ready for user input.

Input Type Values of form

In HTML forms, the <input> element is versatile and can have different types using the type attribute. Here are some common type values used in forms:

• Text Input: <input type="text">:This creates a text input field where users can type alphanumeric characters, like their username.

            
<!DOCTYPE html>
<html>
<head>
    <title>Text Input</title>
</head>
<body>
    <h2>Text Input</h2>
    <form>
        First Name:-
        <input type="text" name="fname" placeholder="Enter your First Name"><br><br>
        Last Name:-
        <input type="text" name="lname" placeholder="Enter your Last Name">
    </form>
</body>
</html>

• Password Input: <input type="password">:This creates a password input field where the entered characters are masked for security. 

            
<!DOCTYPE html>
<html>
<head>
    <title>Password Input</title>
</head>
<body>
    <h2>Password Input</h2>
    <form>
        Password:-
        <input type="password" name="password" placeholder="Enter your password">
    </form>
</body>
</html>

• Checkbox: <input type="checkbox">: Allows users to select one or more options from a list of choices. 

            
<!DOCTYPE html>
<html>
<head>
    <title>Checkbox Input</title>
</head>
<body>
    <h2>Checkbox Input</h2>
    <form>
        What are your hobbies <br>
        <input type="checkbox" id="hobby1" name="hobby1" value="music">
        <label for="hobby1">Listing to Music</label><br>
        <input type="checkbox" id="hobby2" name="hobby2" value="sing">
        <label for="hobby2">Singing</label><br>
        <input type="checkbox" id="hobby3" name="hobby3" value="cricket">
        <label for="hobby3">Cricket</label><br>
        <input type="checkbox" id="hobby4" name="hobby4" value="gaming">
        <label for="hobby4">Playing Online Games</label><br>
        <input type="checkbox" id="hobby5" name="hobby5" value="novel">
        <label for="hobby5">Reading Novels</label>
    </form>
</body>
</html>

• Radio: <input type="radio">: Allows users to select a single option from a list of choices. 

            
<!DOCTYPE html>
<html>
<head>
    <title>Radio Input</title>
</head>
<body>
    <h2>Radio Input</h2>
    <form>
        Gender:-
        <input type="radio" id="gender" name="gender" value="male">
        <label for="gender">Male</label>
        <input type="radio" id="gender" name="gender" value="female">
        <label for="gender">Female</label>
        <input type="radio" id="gender" name="gender" value="other">
        <label for="gender">Other</label>
    </form>
</body>
</html>

• Submit Button: <input type="submit">: Creates a submit button to send form data to the server for processing.

            
<!DOCTYPE html>
<html>
<head>
    <title>Submit Button</title>
</head>
<body>
    <h2>Submit Button</h2>
    <form action=”test.php”>
        First Name:-
        <input type="text" name="fname" placeholder="Enter your First Name"><br><br>
        Last Name:-
        <input type="text" name="lname" placeholder="Enter your Last Name"><br><br>
        Gender:-
        <input type="radio" id="gender" name="gender" value="male">
        <label for="gender">Male</label>
        <input type="radio" id="gender" name="gender" value="female">
        <label for="gender">Female</label>
        <input type="radio" id="gender" name="gender" value="other">
        <label for="gender">Other</label><br><br>
        <input type="submit" value="submit">
    </form>
</body>
</html>

• Reset Button: <input type="reset">: Creates a reset button to clear form data and reset fields to their default values. 

            
<!DOCTYPE html>
<html>
<head>
    <title>ResetButton</title>
</head>
<body>
    <h2>ResetButton</h2>
    <form action="test.php">
        First Name:-
        <input type="text" name="fname" placeholder="Enter your First Name"><br><br>
        Last Name:-
        <input type="text" name="lname" placeholder="Enter your Last Name"><br><br>
        Gender:-
        <input type="radio" id="gender" name="gender" value="male">
        <label for="gender">Male</label>
        <input type="radio" id="gender" name="gender" value="female">
        <label for="gender">Female</label>
        <input type="radio" id="gender" name="gender" value="other">
        <label for="gender">Other</label><br><br>
        <input type="reset" value="Reset">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

• File Upload: <input type="file">: This allows users to upload a file, like an image, to be sent with the form data.

            
<!DOCTYPE html>
<html>
<head>
    <title>Embed Element</title>
</head>
<body>
    <h1>Embed Element</h1>
    <p>Check out the audio below embedded using the embed element</p>
    <embed src="test.mp3" type="audio/mpeg" width="300" height="400" autostart="false">
</body>
</html>

• Number: <input type="number">: Accepts numerical input, with optional constraints like min and max values. 

            
<!DOCTYPE html>
<html>
<head>
    <title>Number</title>
</head>
<body>
    <h2>Number</h2>
    <form>
        Roll Number:-
        <input type="number" name="quantity" min="1" max="9">
    </form>
</body>
</html>

• Date: <input type="date">: Enables users to select a date from a calendar-like popup.

            
<!DOCTYPE html>
<html>
<head>
    <title>Date</title>
</head>
<body>
    <h2>Date</h2>
    <form>
        D.O.B:-
        <input type="date" name="birthday">
    </form>
</body>
</html>

• Email: <input type="email">: Validates user input to ensure it follows a valid email format.

            
<!DOCTYPE html>
<html>
<head>
    <title>Email</title>
</head>
<body>
    <h2>Email</h2>
    <form>
        Email:-
        <input type="mail" name="mail" placeholder="Enter You Email">
    </form>
</body>
</html>



We use cookies to enhance your user experience. By continuing using our site, you agree to our use of cookies.

Ok Read More