HTML Advanced Application Tips (eight) text box for a form

Tips | text boxes

The form's text box is divided into Single-line text boxes and multiline text boxes. Therefore, a single-line text box is used to enter brief information such as name, E_Mail address, password, and so on; a multiline text box is used to enter information that is longer in content, such as user comments, comments, messages, and so on. As long as you understand the meaning of the text box parameters of the form, it is not difficult to make a text box to receive the information, please see the example below.

　　Example of a de jure single-line text box

The source code for this example is as follows:

<form name= "Form1" action= "mailto:fyy0528@sina.com" method= "post" enctype= "Text/plain" >
<p> your name: <input type= "text" name= "Text1" size= "" Maxlength= "" >
Your e_mail: <input type= "text" Name= text2 "size=" maxlength= "value=" >
Enter Password: <input type= "password" name= "Text3" size= "8" maxlength= "8" > </p>
<p align= "center" >
<input type= "Submit" Name= "submitted" value= "Submit" >
<input type= "reset" name= "rewrite" value= "rewrite" >
</p>
</form>

This example uses three Single-line text boxes to receive the user's name, E_Mail address and password information, the width (size) and maximum input text length (maxlength) of the text box are set in the three text boxes, and the initial value (value) is also set in the second text box. As you may have noticed, I've taken each text box name (name) as an English name, which is handy for the program, because this example is used in the following example. If you use e-mail to receive form information is not processed by procedures, then the Chinese name is more intuitive. To make it a form with actual interactivity, add a Submit button and set the action parameter in the <form> tag as: action= "mailto:web@webjx.com", The method parameter is also set to: Method= "post" so that once the "submit" button is pressed, the message will be emailed to the "web@webjx.com" mailbox. It seems that making is not difficult! Is it? Note, however, that when the value of size is less than the value of maxlength, it scrolls automatically when the content exceeds the length of the input window, whereas the value of size is greater than the MaxLength value, and the content exceeding the MaxLength length cannot be entered.

　　Second, verify the user input information

In the example above, if the user does not write any information to press the Submit button, it is not a white receipt of an e-mail? To avoid this situation, the user's input information should be checked, which will use the onclick parameter of the <input> tag, and we set the onclick button in the <input> tag of the "Submit" buttons to:, and "Test (form)" is a JavaScript subroutine that verifies the input of the text box, and its source code is as follows:

<script language= "JavaScript" >
<!--
function test (form) {
Test1 (form);
Test2 (form);
Test3 (Form)}

function Test1 (form) {
if (form.text1.value== "")
Alert ("You have not written your name, please enter a name!") ")
}

function Test2 (form) {
if (form.text2.value== "" | | Form.text2.value.indexOf (' @ ', 0) ==-1)
Alert ("E_Mail address is not correct, please re-enter!") ")
}

function Test3 (form) {
if (form.text3.value! = "12345678")
Alert ("Password error, please re-enter!") ")
}
-->
</script>

To copy this program between

　　Third, the production of a guest book

This guest book is simple, but it already contains the basic function of the guest book, it is to receive the user's information through the mail, without CGI support. It is also relatively simple to make, it uses a table to produce stereo effect, in the form of the first insert a table, and set up the table of the relevant parameters in the table unilaterally, just proportional to a more than a multiline text box. You cannot get a multiline text box by setting type= "textarea" in the <input> tag. We use another HTML tag <textarea> to set a multiline text box, and if the default text box size is not appropriate, you can adjust the window size by setting the cols and rows parameters. Other tag parameters are set in the same example. This example completes the following source code:

<form name= "Form2" action= "mailto:web@webjx.com" method= "post" enctype= "Text/plain" >
<table width= "50%" border= "1" bordercolorlight= "#000000" bordercolordark= "#FFFFFF" bgcolor= "#CCFFCC" cellpadding= "4" align= "left" >
<tr>
&LT;TD colspan= "2" > <div align= "Center" ><b> Guest book </b></div> </td>
</tr>
<tr>
<td> Name: <input type= "text" name= "TextField" size= "8" > </td>
<td>e_mail: <input type= "text" name= "Textfield2" size= "ten" maxlength= "> </td>
</tr>
<tr>
&LT;TD colspan= "2" > <div align= "center" > Message <br> <textarea name= "textfield3" cols= "a" rows= "3" > </textarea>
</div>
</td>
</tr>
<tr>
<td> <div align= "right" > <input type= "Submission" name= "submit" value= "submitted" > </div> </td>
<td> <input type= "reset" name= "Submit2" value= "rewrite" > </td>
</tr>
</table>
</form>