HTML Input Summary

Source: Internet
Author: User
Tags html form

One, input indicates a form in the form of an imported object, which is different with the type of the text input box, password input box, radio/check box, submit/reset button, etc., described below.
1, Type=text
input type is text, this is the most we see is also the most used, such as login input user name, registration input phone number, e-mail, home address and so on. This is, of course, the default type of input.
Parameter name: The name of the text input box that is also represented.
Parameter size: The length of the input box.
Parameter maxlength: The maximum number of characters allowed in the input box.
Parameter value: The default value in the input box
Special parameter ReadOnly: Indicates that the box can only be displayed and modifications cannot be added.
<form>
Your name:
<input type= "text" name= "yourname" size= "30" maxlength= "value=" The length of the input box is the maximum number of characters allowed ><br>
<input type= "text" name= "yourname" size= "" Maxlength= "" ReadOnly value= "You can only read can't modify" >
</form>
2, Type=password
I don't need to say, a look at the password input box, the biggest difference is when you enter information in this input box is displayed as a confidential character.
The parameters are similar to "Type=text".
<form>
Your password:
<input type= "Password" name= "yourpwd" size= "maxlength=" [] value= "123456" > Password length less than 15
</form>
3, Type=file
When you upload pictures in BBs, in the email upload attachments must be something:)
Provides a file directory input platform, parameters are name,size.
<form>
Your file:
<input type= "File" Name= "Yourfile" size= ">
</form>
4, Type=hidden
A very noteworthy one, often called a hidden field: if a very important piece of information needs to be submitted to the next page, but cannot or cannot be expressed.
In a word, you can't see where the hidden is in the page. The most useful is the value of the hidden.
<form name= "Form1" >
Your hidden info here:
<input type= "hidden" name= "Yourhiddeninfo" value= "cnbruce.com" >
</form>
<script>
Alert ("The value of the hidden field is" +document.form1.yourhiddeninfo.value)
</script>
5, Type=button
Standard a Windows-style button, of course, to let the button jump to a page also need to add write JavaScript code
<form name= "Form1" >
Your button:
<input type= "button" Name= "Yourhiddeninfo" value= "go,go,go! "Onclick=" window.open (' http://www.cnbruce.com ') ">
</form>
6, Type=checkbox
Multi-box, common in the registration of the selection of hobbies, personality, and other information. Parameters are Name,value and special parameters checked (indicates default selection)
In fact, the most important thing is value, which is referred to as value in the processing page. (Attached: Name value can be different, but not recommended.) )
<form name= "Form1" >
A:<input type= "checkbox" Name= "Checkit" value= "a" checked><br>
B:<input type= "checkbox" Name= "Checkit" value= "B" ><br>
C:<input type= "checkbox" Name= "Checkit" value= "C" ><br>
</form>
The name value can be different, but it is not recommended <br>
<form name= "Form1" >
A:<input type= "checkbox" Name= "Checkit1" value= "a" checked><br>
B:<input type= "checkbox" Name= "Checkit2" value= "B" ><br>
C:<input type= "checkbox" Name= "Checkit3" value= "C" ><br>
</form>
7, Type=radio
That is, the single box appears in the multiple selection one of the page settings. Parameters also have name,value and special parameters checked.
Unlike the checkbox, the name value must be the same, otherwise you cannot choose one more. Of course, it is also the value that is submitted to the processing page.
<form name= "Form1" >
A:<input type= "Radio" name= "Checkit" value= "a" checked><br>
B:<input type= "Radio" name= "Checkit" value= "B" ><br>
C:<input type= "Radio" name= "Checkit" value= "C" ><br>
</form>
The following is an example of a different name value, it is not possible to achieve a multi-select effect <br>
<form name= "Form1" >
A:<input type= "Radio" name= "Checkit1" value= "a" checked><br>
B:<input type= "Radio" name= "Checkit2" value= "B" ><br>
C:<input type= "Radio" name= "Checkit3" value= "C" ><br>
</form>
8, Type=image
Compare the other one, take a look at the effect bar, can be submitted as a picture
<form name= "Form1" action= "xxx.asp" >
Your imgsubmit:
<input type= "image" src= ". /blog/images/face4.gif ">
</form>
9, Type=submit and Type=reset
"Submit" and "Reset" two buttons, respectively.
The main function of submit is to submit all the contents of the form to the action page, and reset is a quick and easy function to clear all the contents.
<form name= "Form1" action= "xxx.asp" >
<input type= "text" name= "Yourname" >
<input type= "Submit" value= "Submission" >
<input type= "reset" value= "reset" >
</form>

Second, label properties

Label Properties Properties Description
ACCESSKEY AccessKey Sets or gets the shortcut key for an object.
Atomicselection Specifies whether an element and its contents can be selected uniformly in an invisible unit.
AUTOCOMPLETE AutoComplete Sets or gets the auto-complete state of the object.
BEGIN Begin Sets or gets the delay time before the timeline plays on the element.
Canhavechildren Gets a value that indicates whether the object can contain child objects.
Canhavehtml Gets A value that indicates whether the object can contain rich HTML tags.
CLASS ClassName Sets or gets the class of the object.
ClientHeight Gets the height of the object without calculating any margins, borders, scrollbars, or fillers that may be applied to the object.
ClientLeft Gets the distance between the Offsetleft property and the actual left side of the customer area.
ClientTop Gets the distance between the OffsetTop property and the actual top of the customer area.
ClientWidth Gets the width of the object, without calculating any margins, borders, scrollbars, or fillers that may be applied to the object.
Contenteditable Contenteditable Sets or gets a string that indicates whether the user can edit the content of the object.
Datafld Datafld Sets or gets the field specified by the Datasrc property that is bound to the given data source for the specified object.
Datasrc Datasrc Sets or gets the data source used for data binding.
DefaultValue Sets or gets the initial contents of the object.
DIR Dir Sets or gets the reading order of the object.
Disabled Gets a value that indicates whether the user can interact with the object.
DISABLED Disabled Sets or gets the state of the control.
END End Sets or gets a value that indicates the end time of an element, or that the element is set to a repeating simple, continuous termination time.
FirstChild Gets a reference to the first child object of the ChildNodes collection of the object.
Form Gets a reference to the form in which the object resides.
Hasmedia Gets a Boolean value that indicates whether the element is a html+time media element.
Hidefocus Hidefocus Sets or gets a value that indicates whether the object explicitly indicates focus.
Id Id Gets The string that identifies the object.
Iscontenteditable Gets a value that indicates whether the user can edit the object content.
Isdisabled Gets a value that indicates whether the user can interact with the object.
Ismultiline Gets a value that indicates whether the object's content contains one row or more rows.
isTextEdit Gets whether a TextRange object can be created using the object .
Lang Lang Sets or gets the language to use.
LANGUAGE Language Sets or gets the language in which the current script is written.
LastChild Gets a reference to the last child object in the childNodes collection of this object.
MAXLENGTH MaxLength Sets or gets the maximum number of characters that a user can enter in a text control.
NAME Name Sets or gets the name of the object.
NextSibling Gets a reference to the next sibling object of this object.
NodeName Gets the name of a specific node type.
NodeType Gets the type of node that you want.
NodeValue Sets or gets the value of the node.
Offsetheight Gets the height of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent property.
Offsetleft Gets the left position of the computed object relative to the layout or the parent coordinate specified by the offsetParent property.
OffsetParent Gets a reference to the container object that defines the OffsetTop and offsetleft properties of the object.
OffsetTop Gets the computed top position of the object relative to the layout or the parent coordinate specified by the OffsetTop property.
Offsetwidth Gets the width of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent property.
Onoffbehavior Gets an object that indicates whether the specified microsoft®directanimation® behavior is running.
outerHTML Sets or gets the HTML form of the object and its contents.
Outertext Sets or gets the text of the object.
Ownerdocument Sets or gets the document object associated with the node.
Parentelement Gets the parent object in the object hierarchy.
ParentNode Gets the parent object in the document hierarchy.
parentTextEdit Gets the container object in the document hierarchy that can be used to create TextRange that contain the original object.
PreviousSibling Gets a reference to the previous sibling object of this object.
READONLY ReadOnly Sets or gets a value that indicates whether the object content is read-only.
ReadyState Gets a value that indicates the current state of the object.
RecordNumber Gets The original record of the generated object in the dataset.
ScopeName Gets the namespace defined for the element.
ScrollHeight Gets The scroll height of the object.
ScrollLeft Sets or gets the distance between the left edge of the object and the leftmost of the currently visible content in the window.
ScrollTop Sets or gets the distance between the top of the object and the top of the visible content in the window.
ScrollWidth Gets The scrolling width of the object.
SIZE Size Sets or gets the size of the control.
SourceIndex Gets the order in which the object is placed in the source sequence, that is, the object appears in the all collection of document.
STYLE Sets the inline style for this setting element.
SyncMaster SyncMaster Sets or gets whether the time container must synchronize playback on this element.
Systembitrate Gets the bps of approximately the available bandwidth in the system.
Systemcaption Indicates whether to display text in place of the audio portion of the presentation.
Systemlanguage Indicates whether the given language is selected in the option settings on the user's computer.
Systemoverduborsubtitle Specifies whether to render dubbing or subtitles for users who are watching the demo but are not familiar with the language used for the audio being played.
TABINDEX TabIndex Sets or gets the index that defines the Tab order of the object.
TagName Gets the label name of the object.
Tagurn Sets or gets the Uniform Resource name (URN) specified in the namespace declaration.
Timecontainer Timecontainer Sets or gets the type of timeline associated with the element.
TITLE Title Sets or gets the advisory information (tooltip) for the object.
TYPE Type Gets or sets the input control type represented by the initial setting object.
UniqueID Gets The unique identifier that is automatically generated for the object.
Unselectable Specifies that the element cannot be selected.
VALUE Value Sets or gets the display value of the control object. This value is returned to the server when the control object commits.
Vcard_name Vcard_name Sets or gets the VCard value of the object for use in the auto-complete box.
WIDTH Width Sets or gets the calculated width of the object.

Iii. event of the method

Events Description
OnActivate triggered when the object is set to the active element.
onafterupdate Triggered on a data-bound object after successfully updating the associated object in the data source object.
Onbeforeactivate The object is triggered immediately before it is set to the current element .
Onbeforecut The Zhong District is fired from the source object before it is removed from the document.
Onbeforedeactivate Fires immediately before the activeelement changes from the current object to another object in the parent document.
Onbeforeeditfocus Triggered before an object contained within an editable element enters the UI activation State or the editable container becomes a control selection.
Onbeforepaste Fires on the target object before pasting from the system Clipboard to the document in the selected area.
onbeforeupdate Triggered on a data-bound object before the associated object in the data source object is successfully updated.
Onblur triggered when the object loses input focus.
OnChange triggered when the contents of an object or selection change.
OnClick Triggered when the user clicks the object with the left mouse button .
OnContextMenu Triggered when a user right-clicks a client area to open a context menu.
Oncontrolselect Triggered when the user is about to make a control selection on the object .
Oncut fires on the source element when an object or selection is deleted from the document and added to the system Clipboard.
OnDblClick Triggered when the user double-clicks an object.
OnDeactivate triggered when activeelement changes from the current object to another object in the parent document.
Ondrag Fires continuously on the source object when the drag operation occurs.
Ondragend Triggered on the source object when the user releases the mouse at the end of the drag operation.
OnDragEnter Triggered on the target element when the user drags the object to a legitimate drag target.
OnDragLeave Triggered on the target object when the user moves the mouse out of a legitimate drag target during a drag operation.
OnDragOver triggers on the target element when the user drags the object across a legitimate drag target.
Ondragstart Fires on the source object when the user starts dragging the text selection or selecting the object.
OnDrop Triggered on the target object when the mouse button is released during a drag operation.
onerrorupdate Fires on data-bound objects when an error occurs while updating the associated data in the data source object.
Onfilterchange triggered when a visual filter changes state or completes a transition.
onfocus triggered when the object receives focus.
Onfocusin triggered when the element will be set to focus.
Onfocusout Fires immediately after moving the focus to another element, triggering on the element that currently has focus.
OnHelp Triggered when the user presses the F1 key while the browser is in the current window.
OnKeyDown Triggered when the user presses the keyboard key.
onkeypress Triggered when the user presses the literal key.
OnKeyUp Triggered when the user releases the keyboard key.
Onlosecapture triggered when the object loses mouse capture.
OnMouseDown Triggered when the user clicks on an object with any mouse button .
Onmouseenter Triggered when the user moves the mouse pointer inside the object.
OnMouseLeave Triggered when the user moves the mouse pointer out of the bounds of the object.
OnMouseMove Triggered when the user moves the mouse over an object.
onmouseout Triggered when the user moves the mouse pointer out of the bounds of the object.
onmouseover Triggered when the user moves the mouse pointer inside the object.
OnMouseUp Triggered when the user releases the mouse button while the mouse is over the object.
OnMouseWheel triggered when the mouse wheel button is rotated.
OnMove Triggered when an object is moved.
Onmoveend triggered when the object stops moving.
Onmovestart triggered when the object starts to move.
Onpaste Triggered on the target object when the user pastes data to transfer data from the system Clipboard to the document.
Onpropertychange triggered when a property change occurs on an object that occurs on an object .
onReadyStateChange triggered when the object state changes.
OnResize triggered when the size of the object is about to change.
Onresizeend Triggered when the user finishes changing the dimensions of the object in the selected area of the control.
Onresizestart Triggered when the user starts to change the dimensions of the object in the control's selection.
Onselect Triggered when the current selection is changed.
Onselectstart Triggered when the object is about to be selected.
Ontimeerror An unconditional trigger when a specific time error occurs, usually caused by setting the property to an invalid value.

Method Description
Addbehavior attaches a behavior to an element.
AppendChild appends a child element to an object.
Applyelement Makes an element a child or parent element of another element.
Attachevent Binds the specified function to the event so that the function is called whenever the event fires on the object.
Blur Causes the element to lose focus and trigger the onblur event.
Clearattributes removes all label properties and values from the object.
Click Triggers an onclick event to simulate a click.
CloneNode Copies a reference to an object from the document hierarchy .
Componentfrompoint Returns the position of the object under the specified coordinates through a specific event.
Contains Checks whether the object contains the given element.
createTextRange creates a TextRange object for the element.
DetachEvent Cancels the binding of the specified function from the event so that the function does not receive a notification when the event is triggered.
DragDrop Initializes the drag event.
FireEvent Triggers The specified event for the object.
Focus Causes the element to be focused and executes the code specified by the onfocus event.
Getadjacenttext Returns the adjacency text string.
GetAttribute Gets the value of the specified label property.
GetAttributeNode Gets the attribute object referenced by the attribute. Name property.
Getboundingclientrect Gets the object that specifies the Textrectangle object collection binding.
Getclientrects Gets a rectangular collection that describes the content of the object or the layout within the client area. Each rectangle describes a straight line.
GetExpression Gets an expression for the given property.
HasChildNodes Returns A value that indicates whether the object has child objects.
Insertadjacentelement Inserts an element at the specified location.
insertAdjacentHTML Inserts the given HTML text in the element at the specified position.
insertAdjacentText Inserts the given text at the specified position.
InsertBefore Inserts an element in the document hierarchy.
Mergeattributes Copies all read/write label properties to the specified element.
Normalize Merges the adjacency Textnode object to produce a regular document Object model.
ReleaseCapture Releases mouse snaps for objects in the current document.
RemoveAttribute Removes the given label property for the object.
Removeattributenode Removes the delete attribute object from the object.
Removebehavior the behavior of the detached element.
RemoveChild Removes a child node from the element.
Removeexpression Removes an expression from the specified property.
RemoveNode Removes an object from the document hierarchy .
Replaceadjacenttext Replaces the adjacency text of an element.
ReplaceChild Replaces the existing child element with the new child element.
ReplaceNode Replace the object with another element .
scrollIntoView scrolls the object into the visible range, arranging it to the top or bottom of the window.
Select Highlight the input area of the form element.
SetActive Sets the object to be the current object without placing the object in focus.
SetAttribute Sets the value of the specified label property.
Setattributenode Sets the attribute object as part of the object.
SetCapture Sets mouse snaps for objects that belong to the current document .
SetExpression Sets an expression for the specified object.
SwapNode Swaps the position of two objects in the document hierarchy.

HTML Input Summary

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.