HTML form, CSS, Dom

Form attributes

Action	Define a URL. Send data to this URL when you click Submit.	4	5
Data	For automatic data insertion.		5
Replace	Define what is done when a form is submitted.		5
Accept	List of content types that can be correctly processed by the server processing the form (separated by commas ).	4	5
Accept-charset	List of possible character sets of form data (separated by commas ). The default value is "unknown ".	4	5
Enctype	MIME type used to encode the form content.	4	5
Method	The HTTP method used to send data to the action URL. The default value is get.	4	5
Name	Define a unique name for the form. Not supported. Use Id instead.	4
Target	Where to open the target URL. _ Blank pop-up window	4	5

Upload data enctype = "multipart/form-Data

Common forms:

Input type = "checkbox"
Check box to allow users to select multiple options

Input type = "file"
File browsing box. When a file is uploaded, you can open a mode window to select a file.

Input type = "hidden"
Hide tags, used to implicitly submit variable values in the form

Input type = "password"
Password text box. when you enter a character in this text box, it will be replaced with the * character.

Input type = "radio"
Single option, used to set a group of selection items. You can select only one

Input type = "reset"
Clears and resets the form content to clear the content of all text boxes in the form and restores the selected menu item to the initial value.

Input type = "Submit"
Form submission button

Input type = "text"
Single Row text box

Select
Drop-down list box, which can be single-choice or multiple-choice. The default option is single-choice. If multiple options are added, add <select name = "select" size = "Custom columns" multiple = "multiple">.

Option
The drop-down menu of the list, used with select, displays the value for selection

Textarea
When using a text box with multiple lines, you must close the text content between labels to form the following format:
<Textarea> your text

Form input attributes:

Attribute	Value	Description	4	5
Accept	List_of_mime_types	A list of MIME types separated by commas (,) indicates the MIME type of file transfer. Note: it can only be used with type = "File.	4	5
Align	Left Right Top Texttop Middle Absmiddle Baseline Bottom Absbottom	Defines the text alignment after the image. Not Supported. Use CSS instead.	4
ALT	Text	Define alternative text for the image. Note: it can only be used with type = "image.	4	5
AutoComplete				5
Autofocus	True False	When the page is loaded, the input field gets the focus. Note: TYPE = "hidden" cannot be used.		5
Checked	True False	Indicates that the input element should be selected when it is loaded for the first time. Note: use it with type = "checkbox" and type = "radio.	4	5
Disabled	True False	This element is disabled when the input element is loaded for the first time, so that the user cannot write or select it. Note: it cannot be used with type = "hidden.	4	5
Form	True False	Defines that the input field belongs to one or more forms.		5
Inputmode	Inputmode	Define the expected input type.		5
List	ID of a datalist	REFERENCE The datalist element. If defined, a drop-down list can be used to insert values to the input field.		5
Max	Number	The maximum value of the input field.		5
Maxlength	Number	Defines the maximum number of characters allowed in a text field.	4	5
Min	Number	The minimum value of the input field.		5
Name	Field_name	Define a unique name for the input element.	4	5
Pattern				5
Readonly	Readonly	Indicates whether the value of this field can be modified.	4	5
Replace	Text	Defines how the input field is processed when the form is submitted.		5
Required	True False	Define whether the value of the input field is required. It cannot be used when the following types are used: hidden, image, button, submit, reset		5
Size	Number_of_char	Defines the size of input elements. Not supported.	4
SRC	URL	Defines the URL of the image to be displayed. Only used when type = "image.	4	5
Step				5
Template	Template	Define one or more templates.		5
Type	Button Checkbox Date Datetime Datetime-Local Email File Hidden Image Month Number Password Radio Range Reset Submit Text Time URL Week	Indicates the type of the input element. The default value is "text" Note: This attribute is not required. But we think we should use it.	4	5
Value	Value	For buttons, reset button, and OK button: Define the text on the button. For image buttons: defines the symbolic results that are passed to this field of a script. For check boxes and single-choice buttons: Define the result when the input element is clicked. For hidden domain, password domain, and text domain: defines the default value of the element. Note: it cannot be used with type = "File. Note: This element is required when used with type = "checkbox" and type = "radio.

Form select attributes:

Attribute	Value	Description	4	5
Autofocus	True False	Make the select field focus when loading the page.		5
Data	URL	For automatic data insertion.		5
Disabled	True False	If this attribute is set to true, the menu is disabled.	4	5
Form	True False	Defines one or more forms to which the select field belongs.		5
Multiple	True False	If this attribute is true, multiple projects can be selected at a time.	4	5
Name	Unique_name	Defines the unique identifier of the drop-down list.	4	5
Size	Number	Defines the number of visible items in the menu. Not supported.	4

Form option attributes:

Attribute	Value	Description	4	5
Disabled	Disabled	It is specified that this option should be disabled when it is loaded for the first time.	4	5
Label	Text	Defines the annotation used when <optgroup> is used.	4	5
Selected	Selected	The specified option (displayed in the list for the first time) is selected.	4	5
Value	Text	Defines the option value sent to the server.	4	5

Form textarea attributes:

Attribute	Value	Description	4	5
Autofocus	True False	Make the textarea focus when loading the page.		5
Cols	Number	Specifies the number of columns visible in the text area.	4	5
Disabled	True False	This region is disabled when it is loaded for the first time.	4	5
Form	True False	Defines one or more forms to which the textarea belongs.		5
Inputmode	Inputmode	Defines the expected input type of the textarea.		5
Name	Name_of_textarea	The name specified by this region.	4	5
Readonly	True False	Indicates that the user cannot modify the content in the text area.	4	5
Required	True False	Defines whether the textarea value is required to submit the form.		5
Rows	Number	Specifies the number of lines visible in the text area.	4	5

Special usage: label Label for Attributes

Write Functions that dynamically generate radio

Program code <? PHP
// Function body
Function generate_radio_group ($ name, $ options, $ default ){
$ Name = htmlentities ($ name );
Foreach ($ options as $ value => $ labls ){
$ Value = htmlentities ($ value );
$ Html. = "<input type =/" Radio /"";
$ Html. = "name =/" $ name/"value =/" $ value /"";
If ($ value = $ default ){
$ Html. = "checked ";
}
$ Html. = "> ";
$ Html. = $ labls. "<br> ";
}
Return ($ html );
}
// Initialize data
$ Options = array ('010 '=> 'beijing ',
'022' => 'tianjin ',
'024' => 'shenyang ',
'20' => 'shanghai ',
);
$ Default = '022 ';
// Call a function
$ Html = generate_radio_group ('city', $ options, $ default );
// Output content
Echo $ HTML;
?>

Form Processing Method

Let's look at several global PHP Arrays: program code <? PHP
$ Action = $ _ server ['php _ Self '];
Echo $ action. "<br> ";
$ Name = $ _ server ['server _ name'];
Echo $ name. "<br> ";
$ Ref = $ _ server ['HTTP _ referer'];
Echo $ ref;
?>

Output result: program code/chap5/test. php
Http: // 127.0.0.1/chap5/
127.0.0.1

Http_referer saves a complete source URL.
The current server name of SERVER_NAME.
Php_self: the complete path of the current script, including the file name.

Let's look at an example to prevent data from being submitted outside the site:

Program code <? PHP
$ Action = $ _ server ['php _ Self ']; // The complete path of the current script, including the file name
If ($ _ server ['request _ method'] = 'post') {// judge the form submission method
$ Ref = $ _ server ['HTTP _ referer']; // save a complete source URL.
$ SRV = "http: // {$ _ server ['server _ name']} $ action"; // get the server name. $ action a complete URL
Echo "client: $ ref <br> server: $ SRV <HR> ";

If (strcmp ($ ref, $ SRV = 0) {// use the strcmp function to determine whether the two are the same
Echo "legal submission ";
} Else {
Echo "illegal submission ";
}
} Else {
Echo "Please submit the form! ";
}
?>
<Form action = "<? PHP echo $ action;?> "Method =" Post ">
<Input type = "Submit" value = "sumbit">
</Form>

A comprehensive example:

Form.htm

HTML code

<HTML>
<Head>
<Meta http-equiv = "content-language" content = "gb2312"/>
<Meta name = "generator" content = "Zend Studio"/>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> title </title>
</Head>
<Body bgcolor = "# ffffff" text = "#000000" link = "# ff9966" vlink = "# ff9966" alink = "# ffcc99">
<Form action = "someform. php" method = "Post">

<Table width = "541" border = "0">

<Tr>

& Lt; TD width = "26%" & gt; Name: & lt;/TD & gt;

<TD width = "74%"> <input type = "text" name = "username" value = "Raymond" id = "username"/> </TD>

</Tr>

<Tr>

<TD> password: </TD>

<TD> <input type = "password" name = "password" maxlength = "10" id = "password"/> </TD>

</Tr>

<Tr>

<TD> Age: </TD>

<TD>

<Select name = "Age">

<Option value = "> 16"> less than 16 </option>

<Option value = "16-30" selected> 16-30 </option>

<Option value = "31-50"> 31-50 </option>

<Option value = "51-80"> 51-80 </option>

</SELECT>

</TD>

</Tr>

<Tr>

<TD valign = "TOP"> self-introduction: </TD>

<TD> <textarea name = "Intro" rows = "3" Cols = "50" id = "Intro"> enter your own profile </textarea> </TD>

</Tr>

<Tr>

<TD> <br/>

Sports Hobbies: </TD>

<TD> <input type = "radio" name = "fave_sport" value = "tennis" Checked>

Tennis

<Input type = "radio" name = "fave_sport" value = "football">

Football

<Input type = "radio" name = "fave_sport" value = "Baseball">

Basketball

<Input type = "radio" name = "fave_sport" value = "Polo">

Bowling </TD>

</Tr>

<Tr>

<TD> development language: </TD>

<TD> <input name = "from" type = "hidden" id = "from" value = "Registry ticket">

<Input type = "checkbox" name = "ages []" value = "php" Checked id = "ages []">

PHP

<Input type = "checkbox" name = "ages []" value = "Java" id = "ages []">

Java

<Input type = "checkbox" name = "ages []" value = "Perl" id = "ages []">

Perl

<Input type = "checkbox" name = "ages []" value = "CPP" id = "ages []">

C ++

<Input type = "checkbox" name = "ages []" value = ". Net" id = "ages []">

. Net

<Input type = "checkbox" name = "ages []" value = "Delphi" id = "ages []">

Delphi </TD>

</Tr>

<Tr>

<TD valign = "TOP"> <br>

<Label> development tool: </label> </TD>

<TD> <select name = "develop_ide []" size = "5" Multiple ID = "develop_ide []">

<Option value = "zde" selected> Zend studio </option>

<Option value = "Eclipse"> eclipse </option>

<Option value = "editplus"> editplus </option>

<Option value = "ultraedit"> ultraedit </option>

<Option value = "other"> Other </option>

</SELECT> </TD>

</Tr>

<Tr>

<TD valign = "TOP"> </TD>

<TD> <input type = "Submit" name = "btn_submit" value = "Submit"/> </TD>

</Tr>

</Table>

</Form>
</Body>
</Html>
Someform. php

Program code

<? PHP

// Determine whether the variable name of the button is defined in $ _ post. If yes, the form has been submitted.
If (isset ($ _ post ["btn_submit"]) {
If (empty ($ _ post ['username']) {
Echo "You have not entered the user name ";
Exit (0 );
}
If (empty ($ _ post ['Password']) {
Echo "You have not entered the password :";
Exit (0 );
}
Echo "your Username:". $ _ post ['user _ name']. "<br/> ";
Echo "your password (plaintext):". $ _ post ['Password']. "<br/> ";
Echo "your age:". $ _ post ['age']. "<br/> ";
If (! Empty ($ _ post ['AGES ']) {
Echo "the language you selected is :";
// Process the array generated by the checkbox button of interest selected by the user
Foreach ($ _ post ['AGES '] as $ Lang ){
Echo $ Lang ."";
}
} Else {
Echo "You have not entered any interests ";
}
If (! Empty ($ _ post ['develop _ ide ']) {
Echo "your development tool is :";
// Process the array generated by the menu of multiple development tools selected by the user
Foreach ($ _ post ['develop _ ide '] as $ IDE ){
Echo $ ide ."";
}
} Else {
Echo "You have not selected a development tool ";
}
Echo "your self-introduction:". nl2br ($ _ post ['intro']). "<br/> ";
Echo "webpage hidden value (passed through the hidden tag value):". $ _ post ['from']. "<br/> ";
}
?>

Form Dom and style Control

1 This. selectedindex: This is the subscript of the options to which the selected select belongs, that is, the first option is selected, and the first option is 0.

2. Obtain the value and text value in the option in a select label. There are two methods:

1) it is best to use a name.

Example: var vaule_option1 = Document. Free. free_select.value;

However, you cannot use document. Free. free_select.text to obtain the text value.

For other non-block-level labels in form, it is best to use name, and the block-level label is best to use ID, and the style is best to use
Class to define

2) use this and. selectedindex passed by Parameters

For example, this. Options [This. selectedindex]. value; this. Options [This. selectedindex]. text is also useful.

3. You can also use VaR input_element = getelementsbyname ("free_input ");
VaR value_option3 = input_element [0]. value;
Obtain the value of vaule option3.

Note: getelementsbyname (); obtains the array object type. Therefore, you must use the following method to obtain the specific element.

4. The width control of the Option drop-down list is defined in select.

For example, select {width: 100px}

5 This. Options. length is the number of option elements under the SELECT statement. It is often used for deletion.

For example, for (VAR I = This. Options. Length-1; I> = 0; I --){
This. Remove (I); // This is the select element to be deleted. You can use enet. getelementbyid () to obtain or pass the value through this.
}

6. The simplest way to add option to an empty select is
Doucment. getelementbyid ('id'). Options. Add (new options (text, value ));
You can also use standard DOM operations.

You can also use the rel. Options [I] = New Option (text, value) method.
 
New Option (text. Value) adds the text and value of Option

7. Use document. free. elements ['free-select'] to obtain the corresponding element, and then document. free. elements ['free-select']. value to get the value of this element, docuemnt. free. elememts obtains all elements of the form.

HTML code
<Form name = "free">
<Select name = "free_select" onchange = "red (this)" id = 'free-select'>
<Option vaule = "option1"> AA </option>
<Option vaule = "option2"> BB </option>
</SELECT>
<Input type = "text" name = "free_input" value = "option3"/>
</Form>

JS Code
<SCRIPT type = "text/JavaScript">
Function red (rel ){
}
</SCRIPT>