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.
<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>
About C K Mehta
No comments