Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to work with HTML input

In this article I will cover the basics of HTML Forms and Inputs. I will discuss how to use the different types of form controls to take user input and write some examples to demonstrate the functionality.

Introduction:

Html form is the simple way to receive information from the user and pass it to server. It is the way to select different inputs from users. Html form contain several field in it like check box, radio box, text box, submit button etc. There are numbers of way to collect information from the users. To create a simple html form, you just put some buttons and some boxes on your web page, by which users enter their details.

HTML Form:

An html form is the section of the document which is containing normal content, special elements, markup called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls.

There are number of the elements in HTML Form:

  1. Text box for input type
    • Simple textbox
    • Text Area box
  2. Selection boxes
    • Radio button
    • Check boxes
    • Drop-down boxes
  3. Submit button
  4. Text box for input type:

    In this field user input their content in one line or the multiple line text within the text boxes.

    Simple Textbox:

    This is the simplest way to input the text in the textbox. This type of textbox creates a limited number of the character input box, user enter in only one line.

    Listing 1: Simple script for creating one line text box.

    <!DOCTYPE html>
    <html>
    <head>
    	<title>MrBool Development Tutorial</title>
    </head>
    <body>
    <form action="">
    <input name="name" size="20" type="text" />.
    </form>
    </body>
    </html>
    

    Output:

    Above figure is the output of the one line text box

    Figure 1: Above figure is the output of the one line text box.

    Text Area (Multiline):

    Instead of one line text, sometimes we need multiple line text formatting. In that case use multiple line textbox. It makes easy to input large input data.

    Listing 2: Simple script for creating multiple line textbox

    <!DOCTYPE html>
    <html>
    <head>
    	<title>MrBool Development Tutorial</title>
    </head>
    <body>
    <form action="">
    <TEXTAREA NAME="Comments" ROWS=4 COLS=40 >
    </TEXTAREA>
    </form>
    </body>
    </html>
    

    Output:

    Above figure is the output of the multiple line text boxes

    Figure 2: Above figure is the output of the multiple line text boxes.

    Drop-Down Boxes:

    You can use drop-down boxes when you need to show large number of optional answer. Radio button and check box do same thing, it is just a different way of appearance. Most of available options are not visible until the user click on dropdown box.

    Listing 3: Simple script for creating drop-down select list

    <!DOCTYPE html>
    <html>
    <head>
    	<title>MrBool Development Tutorial</title>
    </head>
    <body>
    <form action="">
    <select name="color">
    <option value="red">Red</option>
    <option value="yellow">yellow</option>
    <option value="pink">pink</option>
    <option value="green">green</option>
    </select>
    </form>
    </body>
    </html>
    

    Output:

    Above figure is the output of the drop-down list

    Figure 3: Above figure is the output of the drop-down list

    In the above output all the options are listed in the form of list. When user clicks on the dropdown box then all the options are shown in the list.

    Radio Button:

    You can use radio button when you have cluster of optional answer. The below example will demonstrate the radio button use:

    Listing 4: Simple script for creating Radio buttons.

    <!DOCTYPE html>
    <html>
    <head>
    	<title>MrBool Development Tutorial</title>
    </head>
    <body>
    <form action="">
    <input type="radio" name="fruit" value="Apple">Apple<br>
    <input type="radio" name="fruit" value="Banana">Banana
    </form>
    <p><b>Note:</b>User can select any one  When a user clicks on a radio-button, it becomes checked, and rest of the radio-buttons with equal name become unchecked.</p>
    </body>
    </html>
    

    Output:

    Above figure is the output of the radio-button

    Figure 4: Above figure is the output of the radio-button.

    Check Boxes:

    Check boxes are used when you need to display Boolean entries like set of “Yes” answer or set of “No” answers.

    Listing 5: Simple script for creating check boxes.

    <!DOCTYPE html>
    <html>
    <head>
    	<title>MrBool Development Tutorial</title>
    </head>
    <body>
    <form action="">
    <input type="checkbox" name="Instruments" value="">Do you have Mobile <br>
    <input type="checkbox" name="Instruments" value="Car">Do you have iPhone 
    </form>
    </body>
    </html>
    

    Output:

    Above figure is the output of check boxes

    Figure 5: Above figure is the output of check boxes.

    Submit Button:

    In the end of the form user needs a “Submit” the form. So Submit button required at the end.

    Listing 6: Simple script for adding submit button

    <!DOCTYPE html>
    <html>
    <head>
    	<title>MrBool Development Tutorial</title>
    </head>
    <body>
    <form action="">
    <input type="button" value="Submit">
    </form>
     </body>
    </html>
    

    Output:

    Above figure is the output of submit button

    Figure 6: Above figure is the output of submit button

    Conclusion:

    In this article i have covered the basic understanding of HTML Form tag. Now you can create a simple form take the user input and submit it for further processing on server. Please go through with the examples given in this article and let me know in case of any questions.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login