HTML Forms

Previous Next

HTML forms are used to collect user input. The <form> element wraps all the input elements and includes attributes that define how the form behaves.

Common Form Elements

1. Text Input

Use <input type="text"> to create a single-line text input field.

2. Password Input

Use <input type="password"> for a password field that hides user input.

3. Radio Buttons

Use <input type="radio"> to allow users to select one option from a set.

4. Checkboxes

Use <input type="checkbox"> to allow users to select multiple options.

5. Dropdown List

Use <select> element to create a dropdown list of options.

6. Textarea

Use <textarea> to create a multi-line text input field.

Form Submission

When the form is submitted, the data can be sent to a server for processing using the specified action attribute and the HTTP method defined in the method attribute (usually GET or POST).

Example


<html>
<head>
    <title>HTML forms</title>
</head>
<body>
    <form action="tables.html" method="post">
        <label for="name">Enter your name</label>
        <input type="text" name="name" id="name" placeholder="Your name here">
        <br><br>
        
        <label for="place">Enter your place</label>
        <input type="text" name="place" id="place" value="Delhi">
        <br><br>
        
        <label for="phone">Enter your phone number</label>
        <input type="number" name="phone" id="phone">
        <br><br>
        
        <label for="email">Enter your email</label>
        <input type="email" name="email" id="email">
        <br><br>
        
        <label for="psw">Enter a password</label>
        <input type="password" name="psw" id="psw">
        <br><br>
        
        <label for="msg">Enter your message</label>
        <textarea name="msg" id="msg" cols="25" rows="5"></textarea>
        <br><br>
        
        <label for="lan">Choose your favorite web language</label>
        <input type="radio" name="weblan" id="weblan1" value="HTML">
        <label for="weblan1">HTML</label>
        <input type="radio" name="weblan" id="weblan2" value="CSS">
        <label for="weblan2">CSS</label>
        <input type="radio" name="weblan" id="weblan3" value="JavaScript">
        <label for="weblan3">JavaScript</label>
        <br><br>
        
        <label for="lan">Choose your vehicle</label>
        <input type="checkbox" name="vehicle1" id="vehicle1" value="Car">
        <label for="vehicle1">Car</label>
        <input type="checkbox" name="vehicle2" id="vehicle2" value="Bike">
        <label for="vehicle2">Bike</label>
        <input type="checkbox" name="vehicle3" id="vehicle3" value="Scooter">
        <label for="vehicle3">Scooter</label>
        <br><br>
        
        <label for="country">Select your country</label>
        <select name="country" id="country">
            <option value="India">India</option>
            <option value="China">China</option>
            <option value="Russia">Russia</option>
            <option value="UAE">UAE</option>
            <option value="USA">USA</option>
        </select>
        <br><br>
        
        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
        <button type="button">Normal button</button>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Run Code

Previous Next