Night More

Revise Now

Cambridge AS levels

Physics Chemistry Computer Science

Programming and coding

Learn HTML Learn SEO


What do you want
to do?

Contact us Donate Support More Services Send a tweet Social media

more topic chapters

HTML Datalist, Select & Option Tags

There are many more elements which part inside the form element. We will discuss some of them

Datalist HTML Forms

A datalist gives the user an option to choose from a defined number of options. We will see an example


So the datalist contains a list of all defined options

An input element must be linked to the datalist using the list attribute

The user can also choose to enter a value of his own

HTML Select Element/Tag

The select tag is a much stricter form of datalist. Where the user must choose an option defined by the website(An example would be an MCQ paper)

We will see an example


The Optgroup is used to group related options together

The user can't enter his own text but only the options available

Html Labels for Forms

If you want to add a small caption or heading for each input field. Then we use the label tag / element

For this to work each input tag must have an id to uniquely identify itself

Then the label tag uses the for attibute to link it


So the label tags/elements defines the input tags

We can use the <p> tag and it will work but it is bad practice

HTML Fieldset and Legend

The Html fieldset and legend is very similar to the figure and figcaption tags

They are used to group forms with related input tags together and give a small heading or caption to the heading

Let us see a simple example


Form Styling with CSS

Forms could be beautiful styled using CSS. The default stye for the input tags are very ugly

Using CSS we can design forms to become like this

This is indeed a very simple design and forms could be designed to be much cooler and clean to the user. The user interface of a form matters to the user because if the form is not well designed the users might think it is a fake website which is used to steal your data and information

This will be fully covered in CSS styling and web design

Revisezone.com Copyright 2020 Developers & Coding section