• Breaking News

    HTML - "fieldset" and "datalist"

    HTML element FIELDSET and DATALIST

    Just look below the image. It's easy to create just a frame with the help of HTML elements. No CSS is needed.

    It will be helpful to create the filter and get the result.

    html
    The code is here

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>List of all cars in India</title>
    </head>
    <body>
       <form>
        <fieldset>
            <legend>List of Cars</legend>
            <div>
                <label>Car Brand</label>
            </div>
            <div>
            <input list="car-list" type="text">
            <datalist id="car-list">
                <option value="BMW"></option>
                <option value="Tata"></option>
                <option value="Maruti Suzuki"></option>
                <option value="Mahindra"></option>
                <option value="Toyoto"></option>
                <option value="Mercedes-Benz"></option>
                <option value="Audi"></option>
                <option value="Kia"></option>
                <option value="Land Rover"></option>
                <option value="Honda"></option>
                <option value="Ford"></option>
                <option value="Skoda"></option>
                <option value="Volvo"></option>
                <option value="MG"></option>
                <option value="Volkswagen"></option>
                <option value="Jaguar"></option>
                <option value="Renault"></option>
                <option value="Jeep"></option>
                <option value="Nissan"></option>
                <option value="Volvo"></option>
                <option value="Lamborghini"></option>
                  
            </datalist>
        </div>
            <br>
            <div>
                <label>Color</label>
                </div>
                <div>
                <input list="Car-color"type="text">
                <datalist id="Car-color">
                    <option value="Black"></option>
                    <option value="Red"></option>
                    <option value="White"></option>
                    <option value="Gray"></option>
                    <option value="Silver"></option>
                    <option value="Blue"></option>
                    <option value="Green"></option>
        
                </datalist>
            </div>
            <br>
            <div>
                <label>Budget</label>
                </div>
                <div>
                <input list="Car-Budget"type="text">
                <datalist id="Car-Budget">
                    <option value="Under 5 Lakhs"></option>
                    <option value="Under 10 Lakhs"></option>
                    <option value="Under 15 Lakhs"></option>
                    <option value="Under 20 Lakhs"></option>
                    <option value="Under 25 Lakhs"></option>
                    <option value="Under 30 Lakhs"></option>
                    <option value="Luxury Cars"></option>
        
                </datalist>
            </div>
            <br>
            <div>
                <label>Seating Capacity</label>
                </div>
                <div>
                <input list="Car-Seating"type="text">
                <datalist id="Car-Seating">
                    <option value="5 Seater"></option>
                    <option value="6 Seater"></option>
                    <option value="7 Seater"></option>
                    <option value="8 Seater"></option>
                    <option value="9 Seater"></option>
                </datalist>
            </div>
            
        </fieldset>
       </form> 
       
    </body>
    </html>

    No comments

    View My Stats