Required and non-must-extracting field items in DHTML

zhaozj2021-02-16 72

The novel is: the English topic of this translation is Trimming Form Fields, which may not be very appropriate.

Order: Form is often used to collect some information from the user, enters some basic required information in the Form, and of course, you can fill in or not filled in non-mustular information. Many web business sites are usually containing many lengthy and complicated various field items (text boxes related to specific information, pull-down selection menu, radio, multi-selection buttons, etc. HTML tag elements), fill in or select by the user A fact that a unwilling to see is: This will seriously affect the sales of e-commerce - most users do not fill in these messy field items, and choose to leave. If you control the display or hidden field items, you will be a very good idea! How to do it? Very simple - easy to complete with a small amount of JavaScript, DOM, and CSS.

n html tag

First, we set a basic form, HTML code is as follows, including Fieldsets, Legends, and Labels and some HTML tags in the Form.

More ... More ... You will notice that the following is added to each field element to add
Mark, which is purely for page layout, if you don't consider the layout effect, you can delete it.

n Binding non-necessarily

The non-must-extracted field item that needs to be bound and the associated Label are placed in the DIV markup and set the DIV Class property name "FM-Optional", the code is as follows:

< Label for = "label"> first name

Now, we add an empty segment to the form on the Form, which will become a switch to display / hide the non-required field item:

N Form CSS setting

The following CSS settings will apply to all required literary items. (All fields are specified as required, unless otherwise setting - see after), the outer line color of INPUT and SELECT is set to red.

Fieldset Div {

Margin: 0;

Padding: 0;} Fieldset Div Input {Width: 200px; Border: 1PX Solid # 900; Padding: 1px;} Fieldset Div Select {Width: 200px; Border: 1PX Solid # 900; Padding: 1px;} To learn which of the users It is a reference to the field item, add a Before pseudo class for the Label tag in the CSS, it does not apply to IE, see below: Fieldset Div Label: Before {content: "*"; // Before Label plus one * Number, indicating that it is required to extract the word item} Now we set the style of the unligated field item (Remember the settings for the previously defensive field items? DIV Class property value is FM-Optional, and this DIV included It is a non-required field item.), Here INPUT's outer sides are gray: fieldset div.fm-optional {display: block; / * Default Show non-required field * /} fieldset div.fm-optional label: before { Content: ""; / * Remove the * /}. FM-Optional Input {Border: 1px Solid #ccc;} Of course, the above is just a style of style, you can Customized is more appropriate. N Add event still remember? At the beginning, we placed an id attribute value on the Form to be a space segment of LinkContainer. Now, we have to write a bit of JavaScript and combine DOM to mark this paragraph as some operations. When the HTML page is loaded, a hyperlink text is generated in the paragraph tag: Toggle.Appendchild (Document.createTextNode ('To hide the required word item " ? '));

Then, when the user clicks this hyperlink text, there will be some changes in text: this.firstchild.nodeValue = (linktext == 'Is it hidden without the required field item?')?

'Do you want to display a definition of the word item?': 'Is it hidden?

Finally, set all the styles of all Class property values for FM-Optional tags:

IF (TMP [i] .classname == 'fm-optional')

{

TMP [i] .style.display = (TMP [i] .style.display == 'none')

? 'block': 'none';

}

N small knot

! A very easy to use and understand (it is very good to work very well on Jaws), and users only need to switch to display / hide non-required fields, which can quickly process those item items that must be filled in online.

Here is an example of completed:

http://blog.9cbs.net/yjgx007/4/2004/07/10/38273.aspx

Download CSS and JS code in the example

Cssjavascript

转载请注明原文地址:https://www.9cbs.com/read-17447.html

9cbs

New Post(0)