How to make an example of HTML page form

Beginners | Web page

text Box

code format: <input type= "text" Name=
"..." size= "..." maxlength= "..." value= "..." >

attribute Explanation:

type= "Text" defines a single-line text input box;
The name attribute defines the names of the text boxes, and you must define a unique name to ensure accurate collection of data;
The Size property defines the width of the text box, in units of a single character width;
The MaxLength property defines the maximum number of characters to enter;
The Value property defines the initial value of the text box;

Demo:

The above demo code is: <input type= "text" name= "example1" size=
"" "Maxlength=" >

Multi-line text box

code format: <textarea name= "..." cols= "..." rows= "..." wrap= "VIRTUAL" ></TEXTAREA>

attribute Explanation:

The name attribute defines a multiline text box, and to ensure accurate collection of data, a unique name must be defined;
The Cols property defines the width of a multiline text box, in units of a single character width;
The Rows property defines the height of a multiline text box, in units of a single character width;
The Wrap property defines how the input is displayed when it is larger than the text field, with optional values as follows:
• The default value is text wrapping, which automatically goes to the next line when the input exceeds the right edge of the text field, and no line breaks appear where the data is automatically wrapped when it is submitted;
• Off, to avoid text wrapping, when the input exceeds the right edge of the text field, the text scrolls to the left, and you must use return to move the insertion point to the next line;
• Virtual to allow text to wrap automatically. When the input exceeds the right boundary of the text field, it automatically goes to the next line, and the data will not appear when the line is wrapped automatically when it is committed;
• Physical, which wraps the text, and the line breaks are also submitted for processing when the data is submitted.

Demo:

The
above demo code is: <textarea name= "example2" cols=
"rows=" "2" wrap= "Physical" ></TEXTAREA>

Password Box

code format: <input type= "password" name=
... "size=" ... "maxlength=" ... ">

attribute Explanation:

Type= "Password" defines the password box;
The name attribute defines the names of the password boxes, and to ensure the accurate collection of the data, a unique name must be defined;
The Size property defines the width of the password box, in units of a single character width;
The MaxLength property defines the maximum number of characters to enter.

Demo:

The
above demo code is: <input type= "password" name= "Example3
" size= "" "Maxlength=" >

check box

code format: <input type= "checkbox" Name= "
..." value= "..." >

attribute Explanation:

type= checkbox definition check box;
The Name property defines a check box, and to ensure accurate collection of data, a unique name must be defined;
The Value property defines the values of the check box.

Demo: Webjx.com FreeInfo.Webjx.Com

The
above demo code is: <input type= "checkbox" Name= "webjx.com" value= "" >webjx.com<input type= "checkbox" Name= " FreeInfo.Webjx.Com "value=" >freeinfo.webjx.com

Single selection box

code format: <input type= "Radio" name= ... "value=" ... ">

attribute Explanation:

type= "Radio" definition check box;
The Name property defines a check box, and to ensure accurate collection of data, a unique name must be defined;
The Value property defines the values of the check box.

Demo: Webjx.com FreeInfo.Webjx.Com

The
above demo code is: <input type= "Radio" name= "Myfavor" value= "" ">webjx.com<input type=" checkbox "Name=" Myfavor "value=" >freeinfo.webjx.com

File Upload Box

code format: <input type= "file" Name= "
..." size= "..." maxlength= "..." >

attribute Explanation:

type= "file" definition files upload box;
The name attribute defines a file upload box, to ensure accurate collection of data, you must define a unique name;
The Size property defines the width of the File upload box, in units of a single character width;
The MaxLength property defines the maximum number of characters to enter.

Demo:

The
above demo code is: <input type= "file" Name= "myfile" size=
"" "Maxlength=" >

Dropdown
selection Box

Code format:
<select name= "..." size= "..." multiple>
<option value= "..." selected>...</option>
...
</select>

attribute Explanation:

the Size property defines the number of rows for the Drop-down selection box;
The Name property defines the names of the Drop-down selection boxes;
Multiple attribute indicates that it can be selected, if this property is not set, then only a radio;
The Value property defines the values of the selected item;
The selected property indicates that this option has been selected by default.

Demo: 　　Webjx.com 　　FreeInfo.Webjx.Com 　　

The above demo code is:
<select name= "Mysel" size= "1" >
<option value= "1" selected>webjx.com</option>
<option value= "2" >FreeInfo.Webjx.Com</option>
</select>

two commonly used buttons in a form

code format: <input type= "reset" name= "
..." value= "..." >

attribute Explanation:

type= "Reset" to define the reset button;
The Name property defines the names of the reset buttons;
The Value property defines the display text for the button;

demo and code for commonly used buttons in forms:

Submit Button 　 Code: <input type= "Submit" Name= "Mysent" value= "send" >

reset Button 　 Code: <input type= "reset" name= "mysent" value= "Cancel" >