Web Development

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.

 

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

17 Comments on "HTML Form"

Notify of
avatar
Sort by:   newest | oldest | most voted
Eulalia
Guest

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.

Isabel Race
Guest

I аm truly tҺankfgul to tthe owner oof thіs web page who has shаred this great
article at att this time.

Laurel
Guest

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.

Mavis Leonard
Guest

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.

Virginia Fulcher
Guest

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.

Adelaida
Guest

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.

Wilfredo
Guest

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!

Glen Hillier
Guest

What’s up, just wanted to say, I enjoyed this
post. Keep on posting!

Calvin
Guest

This article will assist the internet people for creating new webpage
or even a blog from start to end.

Camilla Callahan
Guest

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!

Esther Youngblood
Guest

This blog was… how do you say it? Relevant!!

Finally I’ve found something which helped me.
Kudos!

Carmella Bidencope
Guest

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!

Shelly Whalen
Guest

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.

Elisha
Guest

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!

Hugh Lieb
Guest

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!

Angelica
Guest

Keep on working, great job!

Imogen
Guest

I am actually happy to glance at this web site posts which includes tons of useful
data, thanks for providing such statistics.

wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW