MyBlogHelp– A Blog for SEO, Blogging, Web Design, Web Development
  • Home
  • About
  • Contact
  • Privacy
  • Sitemap
  • BLOG
  • BLOGGING
    • SEO
    • BlogSpot
    • WORPRESS
    • GOOGLE
    • COMPUTER TIPS
  • WEB DESIGN
    • HTML
    • CSS
    • BOOTSTRAP
    • JAVASCRIPT
    • JQUERY
  • WEB DEVELOPMENT
    • PHP
    • WORDPRESS
  • MAKE MONEY
    • ONLINE BUSINESS
    • ADSENSE
    • AFFILIATE MARKETING
  • DOWNLOADS
    • Blogger Template
    • Wordpress Theme
    • PDF

Thursday, December 6, 2018

How to use Form Tag in HTML?

 MyBlogHelp     December 06, 2018     html     No comments   


HTML Forms

On any webpage, if you want to take any information from the user, for this, you use forms. For example, whenever you create a new email id, first of all, you fill up the sign-up form and you provide your information via a webpage.

The form is the most common way of getting input from a user. Any form takes input from the user and when the user submits that form then all these information is stored in a database.

You can use a variety of form elements to get input information from the user. Such as text-box, radio button, drop-down list etc.

You use <form> tag to create forms in any webpage. This is the container tag, which defines the starting and ending of the entire form. Different form elements are defined inside this tag. There are some of the attributes of this <form> tag given as below.

action

With this attribute, you define what to do when the form is submitted. As soon as you submit the form of a user, you can show thank you message in any other webpage or execute a PHP script.

method

With this attribute, you define the method of storing data. There can be two values of this attribute, GET or POST.

target

With this attribute, you can define what the window will show after the form submission.

You can define form elements through the <input> tag. This tag has some attributes that you use to configure elements. These are given below.

name

The special form element is defined by this attribute. Later this name is used to store values on the server.

type

It shows the type of element. It also shows what kind of value can be input such as for text-boxes type will be text.

size

Using this attribute you can define the form width of any form element. Such as, you can give a text-box width according to you.

value

This can be a default value of an element. As you can see the first name written in a text-box.

Let us now see how you can create a complete form while using these tags and attributes.

Creating Text Boxes

Creating text-boxes for forms in HTML is very easy. For this, you define the text value in the type attribute of the <input> tag. You can use the value attribute to give any default value that will be displayed inside the text-box.

If you are creating a text-box to input password then type password must be given. An example of this is being given below.


           The above script will generate the webpage output as below.

html-textbox-input-tag

Creating Buttons

You can create buttons in four ways in the HTML. It can be defined by the type attribute. These are being given below.

Submit

This button is used to submit the form. This button sends the values of all the elements of the form together to the server. You can create such a button by defining the submit value in the type attribute.

Reset

 This button is used to reset values of all fields of the form. You can define the reset value in the type attribute for creating the Reset button.

Normal button

 This is a normal button that you can take any action as soon as you click. To create a button like this, you give the value of the type attribute to the value button.

Image button

 In this kind of button, you can give an image in the background of the button. To create a button like this, you give the type attribute as the value image.

The above script generates the given web page.


html-submit-button

Creating Radio Buttons

With the radio buttons, the user provides information without a keyboard to the webpage. A radio button is a round box that the user can select the choice.

For example, if you want to know about a user's gender then you can create two radio buttons and give them male and female names. The user can choose any of these and tell his gender.

You connect more than two or more radio buttons via name attribute so that the user can only select one radio button at a time. The radio buttons you want to connect with each other you will have to give the same name.

To create a radio button, you assign the value radio button for the type attribute of the <input> tag. The name of the radio button is given in the name attribute.

As I mentioned above, if you want to create a group of Radio buttons so that the user can select only one radio button at a time, then in such situation, you give the name of all the radio buttons the same. 

An example of this is being given below.

The above script generates the given web page.


html-radio-button

Creating Drop Down List

You use the <select> tag to create a drop-down list. This tag is defined inside the form tag. This tag creates the structure of the drop-down list.

To define the values of the drop-down list, the <option> tag is defined. The more you want to add to the list item, the same <option> tags define. The <option> tag is defined in the <select> tag.

An example is given below.


The above script generates the given web page.


html-drop-down-list

Creating Check Boxes

The checkbox allows any user to choose multiple options. As if you want the user to choose multiple courses, you can create checkboxes and the user can select those.

Creating checkboxes is very easy. For this, you give the checkbox value in the type attribute of the <input> tag and name the check-box in the name attribute. You can also give value to the value attribute. An example is given below.



The above script generates the given web page.


html-checkbox

 Hopefully, this "HTML Tutorial - Form” would be helpful for you. If it's so please help your friends and other bloggers to share this post on social media. If you have any question related to the post, please comment on the comment box and also follow this website for more information about the blogging and SEO tips. 

Previous:- How to use Block & Inline in HTML? 

Next:- How to use DOCTYPE declaration in HTML?
















  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 comments:

Post a Comment

Thank you for reading the post.

Blog Archive

  • ►  2019 (52)
    • ►  December (1)
    • ►  November (2)
    • ►  October (1)
    • ►  August (1)
    • ►  July (1)
    • ►  May (11)
    • ►  April (10)
    • ►  March (6)
    • ►  February (3)
    • ►  January (16)
  • ▼  2018 (54)
    • ▼  December (27)
      • How to use html5 nav tag?
      • How to install Google Fonts on your Blogger Blog?
      • How to use section tag in html5?
      • How to use meter tag in html5?
      • How to use time tag in html5?
      • How to use header tag in HTML5?
      • How to use figure tag in html5?
      • How to use aside tag in html5?
      • How to use details Tag in HTML5?
      • How to use wbr tag in html5?
      • How to use article tag in HTML 5 ?
      • How to use menu tag in html?
      • How to use base tag in HTML?
      • How to use HTML hr and br Tag?
      • How to use HTML address tag?
      • How to use HTML Meta Tags?
      • How to use HTML script & noscript Tag?
      • How to use DOCTYPE declaration in HTML?
      • How to use Form Tag in HTML?
      • How to use Block and Inline Tags in HTML?
      • How to use Lists in HTML?
      • How to use Image Tag in HTML?
      • How to use Table Tag in HTML?
      • How to use anchor Tag in HTML?
      • How to Format & Style in HTML?
      • How to use Heading in HTML?
      • What is Attribute in HTML?
    • ►  November (5)
    • ►  May (5)
    • ►  April (4)
    • ►  February (3)
    • ►  January (10)
  • ►  2017 (17)
    • ►  December (9)
    • ►  November (8)

Popular Posts

  • How to use keygen tag in html5?
  • How to use html5 mark tag to highlight text?
  • How to start Online Business without money from home?
  • What is a search engine?
  • Top 10 Plagiarism Checker Website Which Provides Free Online Tool to Check Copyright Content

Contact Us

Name

Email *

Message *

About MyBlogHelp

Most of the post, we share on this blog related to SEO, Blogging, BlogSpot(Blogger), Wordpress, Online Business, Online Make Money, Online Earnings, Training tutorials such as HTML, CSS, Bootstrap, JavaScript, PHP, and Computer Tips.

Featured Post

How to use keygen tag in html5?

Follow by Email

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © MyBlogHelp– A Blog for SEO, Blogging, Web Design, Web Development | Powered by Blogger
Design by Md. Abdussamad | Blogger Theme by MyBlogHelp.com