HTML Basics
Learn HTML HTML Basics HTML Elements HTML Attributes HTML Comments HTML Colors HTML Style HTML CSS HTML Headings & Paragraphs HTML Formatting HTML Quotations HTML Links HTML Images HTML ListsHTML Intermediate
HTML Tables HTML Blocks HTML Classes & Ids HTML Iframes HTML Head HTML Layouts HTML File Paths HTML Pictures HTML Audio HTML Video HTML YoutubeHTML Advance
HTML Forms HTML Form Attributes HTML POST & GETSEO Tips & Others
SEO Tips Hosting Sites SEO Tools
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
RunSo 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
RunThe 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
RunSo 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
RunForm 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