HTML Form

HTML Form is the section 12 of Beginner’s Guide to HTML.

In your life you may have filled out thousands of forms or applications. Rather than give someone a pen and paper to fillout a form, it will be beneficial if you can give them a online form to capture the user inputs. We can save paper, time and cost. So how to create a online form. Let’s see what kind of components can be have in a form.

  •  Text boxes to write text
    • Ex: Name, Address
  • Check boxes for selecting one and selecting more
    • Ex: Selecting Preferences among several options, Selecting Gender
  • Writing a Date
    • Ex: Date with a specific format
  • Writing a Year
    • Ex: Year with a specific format

So let’s check how to create a HTML form with the above usages.

element used to create a form. All the elements used to represent user inputs should be inside the

element. It’s not a visible element but used to parse the user inputs to the server.

[code language=”html”] Your form inputs, labels and text goes here.
[/code]

Text

[code language=”html”] Name:
[/code]

element used to capture user inputs. If you check the above example, you might see type attribute has a value called text.  This means you can type text in the input box. By default this input box display 20 characters, but can type more than this. If you want to display more than that, there is another attribute called size to change the default value.

Let’s see how what are the other values that can be put in the type attribute.

Password

If you have experienced filling out online forms, you might see that, what types on a password fields are not visible. If you type a alpha numeric character, it will display all the characters using the same special symbol. We called it as mask.

[code language=”html”]
[/code]

Radio Option

If you need to take only one option from several, for example selecting the gender, then radio option comes into rescue. You cannot be both Male and Female at once, aren’t you?

[code language=”html”]



[/code]

Keep in mind the following facts when using the radio option.

  • You can use the for attribute in the label, so you can tick the radio option by clicking on the label also. (We discussed this on a previous section also)
  • You need to give the same attribute value for the name attribute in the radio option inputs.

Another use of radio option is defining the marital status. Either Single or Married.

Checkboxes

Checkboxes are used when selecting several options among several. Not like a circle as in radio option, this comes as a square to put the tick.

[code language=”html”]





[/code]

Submit

After putting all the elements to capture user inputs, Submit button should be there to send the captured data to the server. The data is sent to the page specified in the form’s action attribute. The file defined in the action attribute usually does something with the received input. For example look at the following code.

[code language=”html”]

[/code]

Value of the value attribute is the text to display on the button. When you click the submit button, the browser will send all the input data to a page called “my_form_action.php”. We will deal with this later when we learn about PHP.

Select from a list

There are times we want to select something from a dropdown list. The difference between this and radio option is, page need to display all the radio options all the time and drop down list display all the items only when the user go for it. In other times it only shows a one item and other unselected items are hidden. So the space is saved when using drop down lists.

[code language=”html”]
[/code]

dropdown list defined by using the
[/code]

The attributes rows and cols tells the columns and rows of the text area that need to be displayed on the web page. It’s like the width and height.

Button

Other than the Submit button you can define other kind of custom buttons. But to define the functionality need to be happened when the user clicks, you need to learn JavaScript.

[code language=”html”]
[/code]

Fieldset

It is a standard way to put a border kind of thing around the form with a label what the form is about. This makes it more presentable.

[code language=”html”]
Personal information:

My Form elements goes here

[/code]

Reset

Sometimes user may need to clear all the data that he have entered into the form. Rather than manually doing it using JavaScript, doing it using a reset button is time saver. It is same as the Submit button.

[code language=”html”]
[/code]

If we combine all the things we learn here, you might have come-by something like this.

Sample Form


In this section we learned about creating forms. How to use different HTML components for different types of user inputs. In the next section we are talking about framing.

WHAT’S NEXT?

Let’s learn about HTML Iframe.

 

Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.

17 Comments

Leave a Reply
  1. Simply desire to say your article is as astonishing.
    The clarity on your put up is simply nice and that i cold assume you’re a professional in this subject.
    Well along with your permission allow me to take hold of
    your feed to keep up to date with coming near near post.
    Thanks 1,000,000 and please keep up the enjoyable work.

  2. I have been exploring for a little bit for any high-quality articles or blog posts on this kind of area .
    Exploring in Yahoo I at last stumbled upon this
    site. Reading this info So i am happy to convey that I have an incredibly good uncanny feeling
    I discovered exactly what I needed. I most certainly will make certain to do not forget this web site
    and give it a look on a constant basis.

  3. What’s up to all, how is everything, I think every one is getting more from this website,
    and your views are nice designed for new visitors.

  4. Hey There. I discovered your weblog using msn. That is
    a really well written article. I will make sure to bookmark it
    and come back to learn extra of your useful info.
    Thank you for the post. I’ll certainly comeback.

  5. I think the admin of this site is in fact working hard in favor of his
    web site, for the reason that here every data is quality based material.

  6. Very nice post. I just stumbled upon your blog and
    wanted to say that I have really enjoyed surfing around your blog posts.
    In any case I will be subscribing to your rss feed and I
    hope you write again soon!

  7. I don’t even know how I ended up here, but I thought this post was great.
    I do not know who you are but certainly you’re going to
    a famous blogger if you aren’t already 😉 Cheers!

  8. Everything is very open with a very clear explanation of the issues.

    It was definitely informative. Your site is very helpful.
    Thank you for sharing!

  9. Hey there! Someone in my Myspace group shared his website with us so I came to look it over.
    I’m definitely enjoying thee information. I’m book-marking
    and will be tweeting this to my followers! Terrikfic blog
    and wonderful style and design.

  10. Woww that was unusual. I just wrօte an incredibly long comment but after I
    clіckeԁ sЬmit my comment didn’t show up. Grrrr… well I’m not writing all that over again. Anyhow, just wanted to say excellent blog!

  11. you are in point of fact a excellent webmaster.
    The site loading speed is amazing. It sort of feels that you’re doing any distinctive trick.
    In addition, The contents are masterwork. you have done a magnificent activity in this subject!

Leave a Reply

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