Html form with text box

HTML Forms

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

Example

The Element

The HTML element is used to create an HTML form for user input:

The element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

All the different form elements are covered in this chapter: HTML Form Elements.

The Element

The HTML element is the most used form element.

An element can be displayed in many ways, depending on the type attribute.

Type	Description
	Displays a single-line text input field
	Displays a radio button (for selecting one of many choices)
	Displays a checkbox (for selecting zero or more of many choices)
	Displays a submit button (for submitting the form)
	Displays a clickable button

All the different input types are covered in this chapter: HTML Input Types.

Text Fields

The defines a single-line input field for text input.

Example

A form with input fields for text:

This is how the HTML code above will be displayed in a browser:

Note: The form itself is not visible. Also note that the default width of an input field is 20 characters.

The Element

Notice the use of the element in the example above.

The tag defines a label for many form elements.

The element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.

The element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) — because when the user clicks the text within the element, it toggles the radio button/checkbox.

The for attribute of the tag should be equal to the id attribute of the element to bind them together.

Radio Buttons

The defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Example

A form with radio buttons:

Choose your favorite Web language:

This is how the HTML code above will be displayed in a browser:

Choose your favorite Web language:

Checkboxes

The defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example

This is how the HTML code above will be displayed in a browser:

I have a bike
I have a car
I have a boat

The Submit Button

The defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form’s action attribute.

Example

A form with a submit button:

This is how the HTML code above will be displayed in a browser:

The Name Attribute for

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

Example

This example will not submit the value of the «First name» input field:

Источник

HTML Form Textbox

“A web form is the most common way of collecting online data these days. From individual survey questionnaires to huge marketing campaigns, these web forms prove to be a very helpful source of getting the audience’s perspective. An important component of an HTML form is a textbox, and in this article, we will walk you through the purpose of this HTML element as well as the method of creating text boxes in HTML forms.”

Purpose of a Textbox in HTML Forms

A textbox or a text field in an HTML form is used to collect single-liner textual data from the user. Generally, whenever you want to give your user the liberty to enter the text by typing rather than by selecting it from a pre-defined list, you always make use of an HTML textbox or text field. The following section will describe the procedure of creating a textbox in an HTML form.

Creating Textboxes in HTML Forms

For learning the creation of text boxes in HTML forms, you can consider the two examples explained below:

Example # 1: Creating Simple Textboxes in HTML Forms

In this example, our goal is to create simple text boxes in HTML forms for collecting some specific information. However, we do not want to take any further action after that. We have designed the following HTML script for creating simple textboxes within HTML forms:

You can see that in this script, we have first provided a heading for notifying the user about the purpose of this HTML script. Then, within the “form” label (since we are creating an HTML form), we have defined three different textboxes with labels “Name,” “Age,” and “Gender” for collecting the name, age, and gender of the user respectively. All of these labels, as well as the associated text boxes, will appear in separate lines. The user will be allowed to enter whichever information he wishes to within these textboxes. However, he will not be able to take any further action after entering this information.

When we executed our HTML script, the web page that appeared on our browser is shown in the image below. This web page contains all three of our text boxes.

Now, you are free to enter any random information within these textboxes, as shown in the following image:

Example # 2: Creating Textboxes With an Action Button in HTML Forms

In this example, we will slightly modify the HTML script that we have created above. We want to make this modification to introduce an action button within our HTML form. You will have to look at the HTML script shown below to grasp this modification:

This HTML script is almost the same as we have shared above; however, before closing the “form” label, we have created a “Submit” button in this form as well so that the user can press this button after entering the relevant information into the form. However, we have not created any action page. Therefore, clicking on this button will not navigate you to any new page.

The modified web page according to this HTML script is shown in the following image:

Now, we will enter some information into each of these text boxes, as shown in the image below:

After entering this information, when we pressed the “Submit” button, only the URL of our web page changed, showing the name, age, and gender that we had just entered. This is shown in the following image. However, after doing this, we were simply redirected to a blank HTML form since we did not create any action page in the first place.

Conclusion

This article was written keeping in mind the need for using text boxes in HTML forms. Therefore, it first explained the purpose of this HTML element, followed by the method of creating text boxes in HTML forms. Once you learn this method, it will be a piece of cake for you to create as many textboxes in your HTML forms as needed.

About the author

Ayesha Sajid

Ayesha Sajid has secured a Bachelor’s degree in Computer Sciences and a Master’s degree in Information Security. She is a technical content writer by profession who has around four years of experience in working with Windows and different flavors of the Linux operating system. She also has a keen interest in exploring the latest technology trends.

Источник

HTML textarea – How to Add a Text Box Input Type Tag to Your Website

Joel Olawanle

A text box is a section of your website where users can enter text. A blinking cursor appears when you click or tap on or inside the text box, indicating that you are ready to begin typing. And an on-screen keyboard will appear if you’re using a tablet or smartphone.

Text boxes are classified into two types: text fields and text areas. These two text boxes serve different purposes and help your user understand what they should be typing into the text box.

A text field is a small, typically rectangular box where you can enter a single line of text, such as a name, number, or any other short text type.

A text area is a larger box where you can enter multiple lines of text, such as descriptions, paragraphs, and so on.

When you tap the enter button in a text field, the cursor will either move to the following field or submit the form. In a text area, on the other hand, the cursor will move to a new line, creating a line break.

How to Add a Text Field to Your Website

Whenever you want a user to input something into a webpage, you can use the tag. Then, to ensure this is a text field, you can add the type attribute of text :

This will output a single-line text field on our web page, which can take in all forms of text values. We can also add a label tag or other attributes like the placeholder attribute to let users know what to input in the text field.

There are many more attributes we can define on a text field, such as the maxlength and minlength , to help define the maximum or the minimum amount of text a field can accept.

We can also pass in default values to our text filed with the value attribute:

How to Add a Text Area to Your Website

A text area is defined by a tag. You use it to collect unlimited multi-line text like comments or reviews.

You specify the size of a text area by the cols and rows attributes (or with CSS).

The textarea field does not use the value attribute to pass in default values, but you can place default content between the opening and closing tags.

 
 This is the default comment. 
 

Like the input tags, we can add the maxlength , minlength and placeholder attributes to the textarea field.

 
 This is the default comment. 
 

Conclusion

In this article, you have learned how to add a text box to your website using the and tags, depending on the type of text you wish to add.

You can learn more about HTML tags in the following resources:

Источник