My batch is FSR150323. Datalist is not working in my vscode i have tried alot. Dropdown is not being created, onli input field is getting created. And options in dropdown are coming under input field not in input field. I have copied exact code.
1 Like
@anandanbhore2
It’s difficult to determine the exact cause of the issue without seeing the code you are working with. However, here are some general troubleshooting steps you can try:
- Make sure you have included the necessary HTML code for the datalist and input elements. The datalist element should contain one or more option elements, which will be the dropdown options.
<input list="fruits">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Orange">
</datalist>
- Check if there are any errors in the console. Open the Developer Tools in your browser and see if there are any error messages related to the datalist or input elements.
- Try clearing your browser cache and restarting your browser. Sometimes cached files can cause issues with rendering web pages.
- Check if you have any conflicting CSS styles that might be interfering with the rendering of the datalist element. Try disabling any custom styles you have applied and see if the dropdown works as expected.
If none of these steps work, please provide more information about your code and the specific issue you are facing, so that I can assist you further.
1 Like
none of the above worked
type or paste code here<html>
<head></head>
<body>
<form action="">
<fieldset>
<legend>Student form</legend>
<h2>First form</h2>
<input list="fruits">
<datalis id="fruits">
<option value="">Apple</option>
<option value="">Grapes</option>
<option value="">Orange</option>
</datalist>
<input type="fruit">
<datalist id="fruit">
<option value="">Apple</option>
<option value="">Orange</option>
</datalist>
<br>
<label for="fname">First Name</label>
<input id="fname" required placeholder="First name" type="text" maxlength="10" autocomplete>
<br>
<br>
<label for="lname">Last Name</label>
<input id="lname" required placeholder="Last name" autofocus type="text">
<br>
<br>
<label for="">Password</label>
<input type="password">
<input type="reset">
<br>
<br>
<input type="color">
<br>
<br>
<input type="date" min="2000-01-01" max="2023-01-01">
<br>
<br>
<label for="">E-mail</label>
<input type="email">
<input type="image" src="./Image/grapes.jpg">
<br>
<input type="file">
<br>
<label for="">Contact no-</label>
<input type="number"min="0"max="10">
<br>
<input type="submit">
<br>
<label for="">Gender</label>
<br>
<input type="radio">Male
<br>
<input type="radio">Female
<br>
<label for="">Favourite food</label>
<br>
<input type="checkbox">Apple
<input type="checkbox">Orange
<input type="checkbox" checked>Kiwi
<input type="checkbox">Jack fruit
<input type="checkbox">Pineapple
<br>
<label for="">Subjects</label>
<select name="" id="">
<optgroup label="Technical">
<option value="">MySQL</option>
<option value="">HTML</option>
<option value="">CSS</option>
<option selected value="">JS</option>
<option value="">React</option>
</optgroup>
<optgroup label="Behavioral">
<option value="">English</option>
<option value="">Hindi</option>
<option value="">Tamil</option>
<option selected value="">Telgu</option>
<option value="">Marathi</option>
</optgroup>
</select>
<br>
<button>Submit</button>
<br>
<label for="">Comments</label>
<textarea name="" id="" cols="30" rows="10"></textarea>
</fieldset>
<fieldset>
<legend>College form</legend>
<h2>Second form</h2>
<input list="fruits">
<datalis id="fruits">
<option value="">Apple</option>
<option value="">Grapes</option>
</datalist>
<datalist id="fruit">
<option value="">Apple</option>
<option value="">Orange</option>
</datalist>
<br>
<label for="fname">First Name</label>
<input id="fname" required placeholder="First name" type="text">
<br>
<label for="lname">Last Name</label>
<input id="lname" value="abc" type="text">
<br>
<label for="">Gender</label>
<br>
<input type="radio">Male
<br>
<input type="radio">Female
<br>
<label for="">Favourite food</label>
<br>
<input type="checkbox">Apple
<input type="checkbox">Orange
<input type="checkbox" checked>Kiwi
<input type="checkbox">Jack fruit
<input type="checkbox">Pineapple
<br>
<label for="">Subjects</label>
<select name="" id="">
<optgroup label="Technical">
<option value="">MySQL</option>
<option value="">HTML</option>
<option value="">CSS</option>
<option selected value="">JS</option>
<option value="">React</option>
</optgroup>
<optgroup label="Behavioral">
<option value="">English</option>
<option value="">Hindi</option>
<option value="">Tamil</option>
<option selected value="">Telgu</option>
<option value="">Marathi</option>
</optgroup>
</select>
<br>
<button>Submit</button>
<br>
<label for="">Comments</label>
<textarea name="" id="" cols="30" rows="10"></textarea>
</fieldset>
</form>
</body>
</html>
1 Like
@anandanbhore2
Please try this code.
<html>
<head></head>
<body>
<form action="">
<fieldset>
<legend>Student form</legend>
<h2>First form</h2>
<input list="fruits">
<datalist id="fruits">
<option value="Apple">Apple</option>
<option value="Grapes">Grapes</option>
<option value="Orange">Orange</option>
</datalist>
<input type="fruit">
<datalist id="fruit">
<option value="">Apple</option>
<option value="">Orange</option>
</datalist>
<br>
<label for="fname">First Name</label>
<input id="fname" required placeholder="First name" type="text" maxlength="10" autocomplete>
<br>
<br>
<label for="lname">Last Name</label>
<input id="lname" required placeholder="Last name" autofocus type="text">
<br>
<br>
<label for="">Password</label>
<input type="password">
<input type="reset">
<br>
<br>
<input type="color">
<br>
<br>
<input type="date" min="2000-01-01" max="2023-01-01">
<br>
<br>
<label for="">E-mail</label>
<input type="email">
<input type="image" src="./Image/grapes.jpg">
<br>
<input type="file">
<br>
<label for="">Contact no-</label>
<input type="number"min="0"max="10">
<br>
<input type="submit">
<br>
<label for="">Gender</label>
<br>
<input type="radio">Male
<br>
<input type="radio">Female
<br>
<label for="">Favourite food</label>
<br>
<input type="checkbox">Apple
<input type="checkbox">Orange
<input type="checkbox" checked>Kiwi
<input type="checkbox">Jack fruit
<input type="checkbox">Pineapple
<br>
<label for="">Subjects</label>
<select name="" id="">
<optgroup label="Technical">
<option value="">MySQL</option>
<option value="">HTML</option>
<option value="">CSS</option>
<option selected value="">JS</option>
<option value="">React</option>
</optgroup>
<optgroup label="Behavioral">
<option value="">English</option>
<option value="">Hindi</option>
<option value="">Tamil</option>
<option selected value="">Telgu</option>
<option value="">Marathi</option>
</optgroup>
</select>
<br>
<button>Submit</button>
<br>
<label for="">Comments</label>
<textarea name="" id="" cols="30" rows="10"></textarea>
</fieldset>
<fieldset>
<legend>College form</legend>
<h2>Second form</h2>
<input list="fruits">
<datalis id="fruits">
<option value="">Apple</option>
<option value="">Grapes</option>
</datalist>
<datalist id="fruit">
<option value="">Apple</option>
<option value="">Orange</option>
</datalist>
<br>
<label for="fname">First Name</label>
<input id="fname" required placeholder="First name" type="text">
<br>
<label for="lname">Last Name</label>
<input id="lname" value="abc" type="text">
<br>
<label for="">Gender</label>
<br>
<input type="radio">Male
<br>
<input type="radio">Female
<br>
<label for="">Favourite food</label>
<br>
<input type="checkbox">Apple
<input type="checkbox">Orange
<input type="checkbox" checked>Kiwi
<input type="checkbox">Jack fruit
<input type="checkbox">Pineapple
<br>
<label for="">Subjects</label>
<select name="" id="">
<optgroup label="Technical">
<option value="">MySQL</option>
<option value="">HTML</option>
<option value="">CSS</option>
<option selected value="">JS</option>
<option value="">React</option>
</optgroup>
<optgroup label="Behavioral">
<option value="">English</option>
<option value="">Hindi</option>
<option value="">Tamil</option>
<option selected value="">Telgu</option>
<option value="">Marathi</option>
</optgroup>
</select>
<br>
<button>Submit</button>
<br>
<label for="">Comments</label>
<textarea name="" id="" cols="30" rows="10"></textarea>
</fieldset>
</form>
</body>
</html>
1 Like
Yes now its working, Thank you! One more problem is there in password field , it is working fine but the eye symbol which comes after entering password not showing.
1 Like
@anandanbhore2
Try this code
<label for="">Password</label>
<input type="password" pattern=".{1,}" title="Password must contain at least one character">