HTML Beginner Tutorial-Forms

Beginners | tutorials

Site original content, reproduced please indicate the source Web page teaching network .

Use the form to implement the transfer of the page data, when the user fills out the information in the page can click the Submit button to achieve the data sent, when we want to interact with the user can use the form to achieve. For example, this site:http://webjx.com/yijian.htm

The form itself is of no use, they are usually connected to a program to implement data processing, such as when you are familiar with the production of static Web pages, you should feel that the function is very limited, then you should want to build dynamic station then you fully understand the usefulness of the form. One of the easiest ways to use this is when your host only supports HTML, you can make an online submission form, and then the form's data is sent out in email.

The form tags are usually: form, input, textarea, select and option.

When you define a form with a form label, it must have an action action in order to transmit the contents of the form. There is usually a method attribute in the tag that tells the browser how the data is sent out, usually in two ways: Get and post, and the default is the Post method, which is to send the data by mail, which usually gets the data at the address of the server.

The code for the form is usually the following format:

The input label is usually used in the form, and he is an important label in the form, and his specific format is as follows:

<input type= "text"/> is a standard format. Indicates the data information of the text type.

<input type= "Password"/> is also a standard format, but it usually shows an asterisk instead of what we actually entered. The page used to make the password.

<input type= "checkbox"/> is a side-by-side checkbox that asks if Access is selected for this item. He also has a property of his own that has been selected in the format: <input type= "checkbox" checked= "Checked"/>.

<input type= "Radio"/> is a radio box that normally allows users to select only one of these tabs after a few such labels have been set.

<input type= "File"/> displays an area of the files in your computer, usually a file or program that you open.

<input type= "Submit"/> is a button that when you have added the contents of the form can be used to implement the submission, you can also control the text displayed on the button, for example: <input type= "Submit" value= "webjx.com" />.

The <input type= "image"/> button displays a graphic. It requires us to use SRC to indicate the position of the image.

<input type= "button"/> is a button, and when there is no other code, he has no effect.

<input type= "reset"/> Reset the button on the form. You can remove all the content that you just filled out.

<input type= "hidden"/> is a field that is not displayed and is used to pass data. Like the name of the page user, such as can indicate you this email is from webjx.com, then when I open the Mailbox view will show the message is from webjx.com I know is through my website submitted data. Oh

TextArea is a basic and a label that is used when the input is relatively long. He needs row and column properties:

<textarea rows= "5" cols= "a" >a big load of text here</textarea> there is usually an option tag inside this tag. For example:

The value of the selected option will be sent out when the form is sent out.

Similar to the radio buttons button, option also has a select attribute such as: <option value= "Mouse" selected= "selected" >Rodent</option>.

All the tags mentioned above will give them a name to connect to the program when we connect to the program. For example, <input type= "text" name= "Talkingsponge"/>

The complete code for the form in use is shown below. (Note: If this form works properly, it should have a ' contactus.php ' file to handle the contents of the form, otherwise the data for the form will not be handled correctly, or we can change the file here to: mailto: Webmaster@webjx.com to implement the Submit mail, other ways are gone.

You can learn some of the advanced content of this site to achieve programming processing form! Then you are the master.