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
Ghulam Ahmad is an Excellent Writer, His magical words added value in growth of our life. Highly Recommended
9 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