Skip to main content

Forms Tag in HTML

Forms tag in HTML

👉 The forms tag is used to create an HTML form for user input..

👉 In this Blog i will show you how to create a form and its tags, attributes.

👉 Let's Start

Firstly we  create a form start with <form> tag </form>

<form action="serverlink" method="POST" autocomplete="off">

<fieldset > 

<legend> Registration form</legend>

Note: Firstly we create a Label tag 

<label for="fname" class="fname"> First Name </label> </br>

👉We use input type ="text" for  get a user information in text. like name address, and other info.

        <input type="text" name="fname" id="fname"> </br> </br>


<label for="lname"> Last Name </label></br>

<input type="text" name="lname" id="lname"> </br> </br>


👉    When we want a user email id so we use input type="email" 

        <label for="email"> Email </label></br>

<input type="email" name="email" id="email"> </br> </br>


<label for="gender"> Gender: </label> </br>

<label for="Male"> Male </label>

👉    When we want a one option to select we use input type="radio" 

<input type="radio" value="Male" name="radio" id="radio">

<label for="female"> Female </label>

<input type="radio" value="Female" name="radio" id="radio"> </br> </br>

👉    When we want a user input date and time so we use input type="datetime-local" 

<label for="datetime">Date and Time</label></br>

<input type="datetime-local" name="datetime" id="dt"> </br> </br>

👉    When we want a user selection option so we use <select> and <optgroup> <option> 

<label for="courses"> Select Courses:</label></br>

<select id="select">

<optgroup label="Website Designing">

<option value="HTML"> Basic HTML </option>

<option value="CSS">CSS`</option>

<option value="Javascript">Javascript`</option>

<option value="Bootsrap">Bootstrap`</option>

</optgroup>

</select>  </br></br>

👉    When we want a user submit the form and we create a submit button for use <input type="button> 

<input type="button" name="submit" id="submit" value="submit"> 

</fieldset>

</form>


Many more attributes in form tag you can use it and try those tags :


1passwordgives input field to user to enter password
2           submitdefines submit button to submit inputs to host
3resetgives a button which erases all the inputs entered
4radiogives radio button on which only one option can be selected
5checkboxgives checkboxes which allows multiple selection of option
6buttongives a button which can be pushed over and handle the event
7filegives facility to upload a file on form
8imagegives button having image upon
9colordefines a input field with specific color
10dategives a calendar to upload a date on form
11datetime-localgives a calendar to upload a date on form without time zone
12emailgives input field to upload an email address
13monthgives input field to control over month
14numberGives input field to enter especially number
15urlgives input field to enter the url address
16weekgives input field to enter the week
17SearchDefines a single line text field for entering a search string.
18TelDefines an input field for entering the telephone number.
19Rangegives the  dragging range button to set the range

Try these attributes in form. T

follow my channel and get new notification on time:
Thanku


Comments

Popular posts from this blog

HTML Basic

 How to Write HTML Tags All HTML document must start with <!DOCTYPE HTML> HTML Document start with <html> and end with </html> (that's call a start tag and end tags. The visible part of the document between <body> and </body> tags. Type of Heading Tags:  HTML document contains a 6 types of heading  we are heading describe with  <h1> heading 1 </h1> tags <h2>  heading 2  </h2>   <h3>  heading 3  </h3>   <h4>  heading 4  </h4>   <h5>  heading 5  </h5>   <h6>  heading 6  </h6> Every heading have a different fonts size. Example: Do practice and Touch with our blog  

TYPE OF HTML CSS

 Types of HTML CSS To change a HTML documents style Three Types to Add CSS in HTML 1.      Inline CSS: To using by <p style> change a style of HTML Attribute.      2.     Internal CSS: by using <style> tag in the below of <head> tag.           3.    External CSS : By using <link> element in link to external CSS file. INLINE CSS We use inline CSS in a line      Example : <p style=“color:green;”> Green Text </p> Here we use inline css… INTERNAL CSS In this section we use Internal CSS.      We use <style> element under the <head> section. Example:           <style>                 p {color:green ;}                      </style> EXTERNAL CSS External CSS create a new fil...

HTML BACKGROUND IMAGES

HTML Background Images In this Blog we learn that how to change background color in HTML and how to use background element in Backgrounds. 1.     In this blog we use Internal CSS to change a background. 2.     We given a code Below in this Blog and  You can see on youtube video link here:  Click Here <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Image Background</title> <style type="text/css"> body{background-image: url(D:\mybloglogo.png); background-repeat: no-repeat; background-attachment: fixed; background-size: auto;} </style> </head> <body> <h2>What is Lorem Ipsum? </h2>  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer ...