HTML Forms

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>
				
			

Learn more about HTML in detail 

MDN website

W3School website

Share it

Facebook
Twitter
LinkedIn
Pinterest
WhatsApp

Table of Contents

Ghulam Ahmad is an Excellent Writer, His magical words added value in growth of our life. Highly Recommended

Read more about poetries

Ahmad Shafi Poetry

15 Responses

  1. 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.

  2. For the reason that the admin of this site is working, no uncertainty very quickly it will be renowned, due to its quality contents.

Leave a Reply

Your email address will not be published. Required fields are marked *