Home > Developer > Web Develop
1. <form>...</form> form Mark
Basic syntax Format:
<form action= "url" method= "Get|post" name= "name" onsubmit= "" target= "" ></form>
Action property: The Change property is used to specify the URL address for processing the form data program.
Method Property: The Change property is used to specify how the data is transferred to the server. There are two kinds of property values, get and post
Name property: Specifies the form's names, which can be customized
OnSubmit Property: Specifies the event that is triggered when the user clicks the Submit button.
Target property: Specifies the window in which the input data results are displayed, _blank the target file in a new window, _self is open in the same window, the item is generally not set, _parent is open in the previous level window, and is often used when using frames pages; _ Top means open in the browser's entire window, ignoring any frames.
2. <input> Form Input Mark
Is the most frequently used form tag, with the following basic syntax format:
<input type= "image" disabled= "Disabled" checked= "checked" width= "digit" maxlength= "digit" readonly= "" size= "digit" Src= "uri" usemap= "uri" alt= "name=" checkbox "value=" checkbox ">
Type: Specifies which type of input field is added: text, password, file, radio, checkbox, etc.
Disabled: Specifies that the input field is unavailable, that is, the field is grayed out, its property value can be null, or it can be specified as disabled
Checked: Specifies whether the input field is selected, using the type attribute value of radio and checkbox
Width: Specifies the input field width, with the Type property value of the image case
Height: Specifies the input field height, using the type attribute value as the image case
MaxLength: Specifies the number of characters that can be entered for type text and password cases, with no word limit by default
ReadOnly: Set to read-only, the property value can be empty, or it can be readonly
Size: Specifies the image source, which is valid when the Type property value is image
Usemap: Set a hotspot map for a picture, valid when the Type property value is image
ALT: Used to specify the text to display when the picture cannot be displayed, which is valid when the value of the Type property is image
Name: Specify the names of the input fields
Value: Specifies the default data value for the input field, which cannot be omitted when the type is checkbox and radio, specifying the value when the data item is selected. When the value of the Type property is button, reset, submit, the display text on the button is specified;
3. <select >...<select> drop-down list box marker
Basic syntax:
<select name= "name" size= "digit" multiple= "multiple" disabled= "disabled" ></select>
Name: Names of list boxes
Size: Displays the number of options beyond the drag scroll bar to view
Disabled: Specifies that the list box is not available
Multiple: Used to enable multi-row list boxes to support multiple selections
4, <textarea> multi-line text marker
Basic syntax Format:
<textarea cols= "digit" rows= "digit" name= "name" disabled= "Disabled" readonly= "readonly" warp= "value" > Default </ Textarea>
Name: Specifies a multiline text box name that is applied when the form data is fetched on the server side after the form is submitted
COLS: Specify the number of columns (width) to display for a multiline text box
Rows: Specify the number of lines (height) to display for a multiline text box
Disabled: Specifies that a multiline text box is not available (grayed out)
ReadOnly: Specifies that the current multi-line text box is read-only
Warp: Sets whether the selected text wraps: Optional: Hard: Default, word wrap, line break is committed to the server at the same time, soft: wrap, but line break is not committed; off: no word wrapping
A simple example is given below:
<body><form action= "" method= "Post" name= "MyForm" > User name: <input name= "username" type= "text" id= " UserName4 "maxlength=" ><br> Password: <input name= "pwd1" type= "password" id= "PWD14" size = "" Maxlength= "20" ><br> Confirm Password: <input name= "pwd2" type= "password" id= "PWD25" size = "maxlength=" ><br> sex:< Input name= "Sex" type= "Radio" class= "Noborder" value= "male" checked> male <input name= "Sex" type= "Radio" class= " Noborder "value=" checked> women <br> Hobbies: <input name= "like" type= "checkboxes" id= "like" value= "Sports" > Sports < Input name= "like" type= "checkboxes" id= "like" value= "Travel" > Travel <input name= "like" type= "checkbox" id= "like" value= "listen to music "> Listen to Music <input name=" like "type=" checkboxes "id=" like "value=" reading "> Reading <br>e-mail:<input name=" email "type = "text" id= "PWD224" size= "><br><textarea name=" content "cols=" rows= "5" wrap= "Hard" ></ Textarea> <br><input name= "Submit" type= "Submit" class= "Btn_grey" value= "to ensureSave "><input name=" reset "type=" reset "class=" Btn_grey "id=" reset "value=" re-fill "><input name=" ImageField " Type= "image" Src= "images/btn_bg.jpg" ></form><select name= "select" ><option> Digital camera Area </option ><option> Photographic Equipment </option><option>mp3/mp4/mp5</option><option>u disk/mobile HDD </option ></select> Multi-row list box (not selectable): <select name= "Select2" size= "2" ><option> digital camera Area </option> <option> Photographic Equipment </option><option>mp3/mp4/mp5</option><option>u disk/mobile HDD </option> </select> Multi-row list box (optional): <select name= "Select3" size= "3" multiple><option> digital camera Area </option> <option> Photographic Equipment </option><option>mp3/mp4/mp5</option><option>u disk/mobile HDD </option> </select></body>
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
HTML form markup simple to use
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
