HTML Forms
Creating Text Inputs and Buttons
- Group from controls
What input are part of the form?
- Send the data somewhere
Where does the form data go when submitted.
Text inputs
<input type= “text”>
- The input element is extremely versatile set type=”text” to create a standard text input. Like <a>, it has no closing tag.
Button
<button type= “submit”> Submit </button>
<button> our first button </button>
The Form Elements
Where the form data is sent
- What HTTP “verb” is used. “METHOD”
<form action= “/signup” method= “get”> </form>
Name and Placeholder Attributes
Name
The name that the data will be sent to the server under
<input type= “text” name= “city”>
<form action=“www.google.com/search>
<input type=“text” name=“q”>
<button> Submit </submit>
</form>
It is code to access direct to search items.
Placeholder
- This is text which written in the form. To use this, we write
<input type= “text” name= “first name” placeholder= “first name” >
Properly Labeling form Controls
Labels
Match a label element to a form control using for attribute. It must match the id attribute on an input
<label for= “username” > Enter your Username </label>
<input type= “text” id= “username”>
Checkboxes, Text areas
Text areas
- Use <textarea> tags to create a multi-line text input
<textarea rows= “5” cols= “33” > Blah Blah </textarea>
Checkboxes
- Use type= “checkbox” to create a checkbox element.
<input type= “checkbox” name= “subscribe” >
Select and Radio Button Grouping
<select name= “pets” id= “pet-select”>
<option value = “dog”> Dog </option>
<option value = “cat” > Cat </option>
<option value = “spider” > Spider </option>
<option value = “parrot” > Parrot </option>
<option value = “goldfish” > Goldfish</option>
</select>
Populate a <select> element with <option> element.
Radio button
Radio buttons are usually grouped together. Only ONE option can be selected.
<label for = “phone”> Call Me </label>
<input type = “radio” id = “phone” name = “contact” value = “phone”>
<label for = “email”> Email Me </label>
<input type = “radio” id = “email” name = “contact” value = “email” >
Name = “contact” shows connection in two or three option either select one from all of them.
Spans
- Spans are generic inline elements. They have no special meaning but can be styled later using CSS.
<span>
My name is Ahmad.
</span>
Divs
- Divs are generic containers that have no inherent meaning. They are used to group content together for styling.
<div>
<p>
This is paragragh under div element.
</p>
</div>
Facebook
Twitter
LinkedIn
Pinterest
WhatsApp
Table of Contents
Interesting Posts
Introduction to HTML
16/12/2024
What Is an API? A Simple Guide for Beginners
28/07/2025
How to Deploy a Website Using GitHub Pages
28/07/2025
Ghulam Ahmad is an Excellent Writer, His magical words added value in growth of our life. Highly Recommended
26 Responses
Great information shared.. really enjoyed reading this post thank you author for sharing this post .. appreciated
I really like reading through a post that can make men and women think. Also, thank you for allowing me to comment!
I do not even understand how I ended up here, but I assumed this publish used to be great
Quick assembly, efficient process.
I truly appreciate your technique of writing a blog. I added it to my bookmark site list and will
Strong structure, no issues.
Thank you for demystifying a concept that many find challenging. Your straightforward explanation made it incredibly accessible. Your talent for simplifying complex topics is much appreciated.
For the reason that the admin of this site is working, no uncertainty very quickly it will be renowned, due to its quality contents.
Looking forward to your next post. Keep up the good work!
Great information shared.. really enjoyed reading this post thank you author for sharing this post .. appreciated
This was beautiful Admin. Thank you for your reflections.
This is my first time pay a quick visit at here and i am really happy to read everthing at one place
Awesome! Its genuinely remarkable post, I have got much clear idea regarding from this post
For the reason that the admin of this site is working, no uncertainty very quickly it will be renowned, due to its quality contents.
Awesome! Its genuinely remarkable post, I have got much clear idea regarding from this post
Such a detailed explanation, I now understand this concept much better.