Web Front End 2017.6.10

Last Update:2017-06-15 Source: Internet

Author: User

Tags button type compact

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Form elements: A channel for information interaction between the client and the server

<form></form>: All form elements should be placed inside

Text input Box:
<input type= "Text"/>
Property:
Name= "Puppy", each form element has a Name property
Value= "value", each form element has a Value property, and value value is changed as user input
Size= "5" to set the length of the text input box
Maxlength= "10", maximum number of characters that can be entered
placeholder= "prompt message", prompting
Readonly= "ReadOnly", Read only

Password entry box
<input type= "Password"/>
Name/value attributes, which are exactly the same as the text input box

Radio Box
<input type= "Radio"/>
Name/value Property
Checked= "Checked", indicating that it is selected

check box
<input type= "checkbox"/>
Name/value Property
Checked= "Checked", indicating that it is selected

drop-down list
<select>---Selection
<option></option>---Items
</select>
Properties for select: Name/value
Multiple= "Multiple", becomes a list box (multiple: multiple columns)
Size= "2", indicating 2 rows

Option's Properties:
Selected= "selected" to indicate which item is selected
disabled= "Disabled", which means the ban is selected
Value= "Value"
------------------------
Button
Normal button:
<input type= "button"/>
Name/value
<button type= "button" > button </button>

<button> Buttons </button>
Property: Type/name/value
Type= "button"/reset (reset)/submit (commit) ", Default to button

Reset button:
<input type= "reset" value= "reset"/>
<button type= "reset" > Reset </button>

Submit button:
<input type= "Submit" value= "Submission"/>
<button type= "Submit" > Submit </button>
The Submit button has the effect of page refresh, and can submit information about the text input box and password input box to the address bar.

File button:
<input type= "file"/>---can select only files and cannot select folders
Name/value Property

Picture button:
<input type= "image" src= "path to Picture"/>
Property: Name/value/width/height

------------------------
Hidden fields:
<input type= "hidden"/>

Text fields:
<textarea></textarea>
There is a Name property, no Value property
Cols= "50" to set the width of the text field
Rows= "5" to set the height of the text field

------------------------
<label></label>
Property:
for= "ID Name"
<label for= "Admin" > Account: <input type= "text" id= "admin"/></label>
<label for= "pwd" > Password: </label><input type= "password" id= "pwd"/>
Label labels can be defined for form elements, making the relationship between text and form elements more compact

------------------------
<form></form>
Property:
action= "path", jumps to a page, submits the data inside the form element to a page
Method= "Get/post"
Get: Data is displayed on the address bar
Post: Data is not displayed on the address bar

----------------------------
Inline frame

----------------------------
Block level container Label:<div></div>
Empty semantic Tags: tags with no HTML attributes

Inline Container label:<span></span>
Empty semantic tags
----------------------------
Label for Wrap Line:
div hn P Table Form ul Li ol dl ...

Labels that are not wrapped automatically:
span I b font u s img Input Select button A ...