some HTML text input

This page is about HTML text input. It is about how to enable your website visitors to input text within your web page.

To create an HTML text input field, you use the HTML <input> tag. You add type="text" in order to make it a text field. This is because the <input> tag can be used for other types of input too - such as a submit button.

Example Text Input Field:

Example:

First name:



Last name:

Code:

<!-- HTML codes by Quackit.com --><br /> <form action="/html/tags/html_form_tag_action.cfm" method="get"><br /> First name:<br /> <input type="text" name="first_name" value="" maxlength="100" /><br /> <br /><br /> Last name:<br /> <input type="text" name="last_name" value="" maxlength="100" /><br /> <input type="submit" value="Submit" /><br /> </form><br /> <p style="font-size:10px;"><a href="http://www.quackit.com/html/tutorial/">HTML lessons</a></p><br />

The above code consists of a <form> tag containing two <input> fields: Two text input fields and one submit button. It also contains a break (<br />) after the first text input field (First name), so that the second input field (Last name) starts on a new line.

Multiple Lines of Text

The <input> tag isn't the only way of creating an HTML text input field. In fact, if you want your users to enter multiple lines of text, you should use the <textarea> tag.

The <textarea> tag is a specialized tag to allow multiple lines of text input.

Example:

Comments:

Code:

<!-- HTML codes by Quackit.com --><br /> <form action="/html/tags/html_form_tag_action.cfm" method="post"><br /> Comments:<br /><br /> <textarea name="comments" id="comments"><br /> Hey... say something!<br /> </textarea><br /><br /> <input type="submit" value="Submit" /><br /> </form><br /> <p style="font-size:10px;"><a href="http://www.quackit.com/html/tutorial/">HTML lessons</a></p><br />

The "Action" Page

The above code assumes that there's an "action page" to process the contents of the form. In this example, "/html/tags/html_form_tag_action.cfm" is the server-side script that processes the form.

Action pages usually require some scripting knowledge to build, however, there are also plenty of free scripts available on the web.

Here's a form to email script that you can use for free. This page provides you with all the code you need to create a feedback form.

Further Details

This info aims to help you understand the above code, which consists mainly of HTML tags (or HTML elements).

The form tags contain other tags nested within them. These other tags define the actual form elements that appear within the form - such as the text area fields and the submit button.

You can use the following template as a basis for your HTML text input. Simply fill in the blanks or remove uneeded attributes.

1. The <form> Tag

For an explanation of all the attributes, see the HTML <form> tag specifications.




<form
 action=""
 method=""
 enctype=""
 accept-charset=""
 accept=""
 name=""
 class=""
 id=""
 dir=""
 lang=""
 target=""
 onSubmit=""
 onReset=""
 onclick=""
 ondbclick=""
 onmousedown=""
 onmouseup=""
 onmouseover=""
 onmousemove=""
 onmouseout=""
 onkeypress=""
 onkeydown=""
 onkeyup="" >

 (the individual form element tags go here - see below)

 </form>

2. The <textarea> Tag

This tag defines the comment box within the form.

For an explanation of all the attributes, see the HTML <textarea> tag specifications.




<textarea
 name=""
 rows=""
 cols=""
 class=""
 id=""
 dir=""
 lang=""
 title=""
 style=""
 readonly=""
 disabled=""
 tabindex=""
 onfocus=""
 onblur=""
 onselect=""
 onchange=""
 onclick=""
 ondbclick=""
 onmousedown=""
 onmouseup=""
 onmouseover=""
 onmousemove=""
 onmouseout=""
 onkeypress=""
 onkeydown=""
 onkeyup="" >

 (this is where the user can type comments and stuff)

</textarea>

3. The <input> Tag

This tag defines the input fields within the form. Input fields can consist of text, check boxes, radio buttons, submit buttons, and more.

For an explanation of all the attributes, see the HTML <input> tag specifications.




<input
 type=""
 name=""
 value=""
 size=""
 maxlength=""
 checked=""
 src=""
 class=""
 id=""
 dir=""
 lang=""
 title=""
 style=""
 align=""
 alt=""
 readonly=""
 disabled=""
 tabindex=""
 accesskey=""
 ismap=""
 usemap=""
 onfocus=""
 onblur=""
 onselect=""
 onchange=""
 onclick=""
 ondbclick=""
 onmousedown=""
 onmouseup=""
 onmouseover=""
 onmousemove=""
 onmouseout=""
 onkeypress=""
 onkeydown=""
 onkeyup="" />

>