First learn the text: HTML page form production detailed explanation

Source: Internet
Author: User
Tags format comments html page requires reset
Beginners | Web page

The form is a Web site and visitors to interact with the window, we now give you some basic knowledge of the form and form beautification methods.

  The first form of recognition

Forms can be used to send data in a Web page, especially when used in contact forms-user input and then sent to email. The form itself is of little use. This requires a program to process the data in the input form. This is also beyond the scope of this site guide. If you use a Web server to place HTML, you can help yourself find some simple tutorials and develop a server-side program to work with a form that is sent to an email.

  Form elements

Tags that are actually used in HTML include form, input, textarea, select, and option. The form that is defined in the form label form must have an action attribute action that tells the form where to send the content when it is submitted.

The Optional method attribute methods tell how the form data will be sent, with get (default) and post two values. It is commonly used to set post values, which can hide information (get information is exposed to the URL). Web Teaching Network

So one form element looks like this:

<form action= "reg.asp" method= "POST" >
</form>

Input tags play an important role in the production of forms. There are 10 forms, summarized as follows:

<input type= "text"/> is a standard text box. It can have a value attribute value that is used to set the default text in the text box. The
<input type= "password"/> Like a text box, but replaces the actual characters entered by the user with an asterisk. The
<input type= checkbox/> is a check box that allows users to quickly select or not choose an entry. It can have a preselection attribute checked, like such a format <input type= "checkbox" checked= "checked"/>. Web Teaching network The
<input type= "Radio"/> is similar to a check box, but the user can select only one radio button in a group. It also has a preselection attribute checked, using the same method as the check box. Web Teaching network The
<input type= "file"/> is an area that shows the files on your computer, just as you would open or save a document in a software. Web Teaching network The
<input type= "Submit"/> is a button that is clicked to submit the form. You can use the value attribute value to control the text displayed on the button (the buttons and reset types below can also be described later), as follows: <input type= "Submit" value= "Ooo. Look. Text on a button. Wow "/>
<input type= "image"/> The image instead of the button text, the SRC attribute is required, like an IMG tag. The
<input type= "button"/> is a button that does nothing without other code. The
<input type= "reset"/> is a button that resets the contents of the form when clicked. The
<input type= "hidden"/> does not display anything that transmits items such as the name of the page that the user is using or the e-mail address that the form must transmit.

Note Input label input is also "/>" from closed.

Multi-line text input box label TextArea is basically a larger text box. It must have row attributes rows and column properties cols, usage like this: Web teaching Network

<textarea rows= "5" cols= "a" >webjx.com welcome</textarea>

Select the tag Select and option label option together to make a drop-down selection box. Work in this way:

<select>
<option value= "option" >option 1</option>
<option value= "second option" >option 2</option>
<option value= "third option" >option 3</option>
</select>

When a form is submitted, the value of the selected option is sent. Web Teaching Network

As with the preselection properties checked of check boxes and radio buttons, option label options also has a preselection attribute selected, which can be used in such a format:

<option value= "Mouse" selected= "selected" >Rodent</option>

The labels above look good on the Web page, but if you have a program to process the form, none of the labels will work. This is because the form field requires a name. So all of the fields need to add name attribute names, such as <input type= "text" name= "Talkingsponge"/>. Web page Teaching

A form should look like this (note: This form will not work unless there is a "reg.asp" file for submitting the data, which is in the behavior property action of the form label form.) )

<form action= "reg.asp" method= "POST" >
<p>Name:</p>
<p><input type= "text" name= "name" value= "Your name"/></p>
<p>comments: </p>
<p><textarea name= "Comments" rows= "5" cols= ">your comments</textarea></p>"
<p>are you:</p> Web page teaching
<p><input type= "Radio" name= "areyou" value= "male"/> male</p>
<p><input type= "Radio" name= "Areyou" value= "female"/> female</p>
<p><input type= "Radio" name= "Areyou" value= "hermaphrodite"/> An hermaphrodite</p>
<p><input type= "Radio" name= "Areyou" value= "asexual" checked= "checked"/> asexual</p>
<p><input type= "Submit"/></p>
<p><input type= "Reset"/></p>
</form>

The above is the form of some of the basic knowledge and form of the working principle, I hope you have a good understanding of the form.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.