About HTML Input and HTMLInput

Source: Internet
Author: User

About HTML Input and HTMLInput

Definition: <input> tags are used to collect user information.Input indicates an Input object in the Form.

The input field has many forms based on different type attribute values. The input fields can be text fields, check boxes (single/check boxes), masked text controls, single-choice buttons, and (submit/reset) buttons.

Instance:

<form action="form_action.asp" method="get">  <p>First name: <input type="text" name="fname" /></p>  <p>Last name: <input type="text" name="lname" /></p>  <input type="submit" value="Submit" /></form>
Syntax: <input type = "value">;

Property value:

Value Description
Button Define the clickable button (in most cases, it is used to start the script through JavaScript ).
Checkbox Define check boxes.
File Define input fields and "Browse" buttons for File Upload
Hidden Define hidden input fields.
Image Define the image form submission button.
Password Define the password field. The character in this field is masked.
Radio Define the radio button.
Reset Define the reset button. The reset button clears all data in the form.
Submit Define the submit button. The submit button sends the form data to the server.
Text Defines the input fields of a single row. You can enter text in the field. The default width is 20 characters.
 

 

 

 

 

 

 

 

 

 

 

 

 

 

The details are as follows:

  • <Input type = "value"/>;

Defines clickable buttons (standard windows buttons) without any action. The button type is usually used to start JavaScript programs when a user clicks a button. Therefore, JavaScript code must be added for buttons to jump to a page.

<Form name = "FormButton"> <input type = "button" name = "enter" value = "click" onclick = "window. open ('HTTP: // www.cnblogs.com/Loonger/') "> </form>

Effect:

<Input type = "checkbox"/>;

Define check boxes. The check box allows you to select one or more options in a certain number of options. Multi-choice box. It is common to select hobbies, personalities, and other information during registration. Parameters include name, value, and special parameter checked (which indicates the default choice). In fact, the most important thing is the value. The value submitted to the processing page is the value. (Note: The name value can be different, but it is not recommended .)

<Form name = "FormCheckbox"> <input type = "checkbox" name = "animal" value = "dog" checked> This is a dog <br/> <input type =" checkbox "name =" animal "value =" cat "> This is a cat <br/> <input type =" checkbox "name =" animal "value =" horse "> This is a horse <br/> </form>/* The name value can be different, but it is not recommended */<form name = "FormCheckbox"> <input type = "checkbox" name = "animal" value = "dog" checked> This is a dog <br/> <input type = "checkbox" name = "animal" value = "cat"> This is a cat <br/> <input type = "checkbox" name = "animal" value = "horse"> This is a horse <br/> </form>

Effect:

<Input type = "file"/>;

Used for file upload. This control has a text box and a browser button. It is indispensable when you upload attachments in BBS and EMAIL.

<form>  <input type="file" name="pic" accept="image/gif" /></form>

Effect:

<Input type = "hidden"/>;

Defines hidden fields. Hidden fields are invisible to users (if a very important information needs to be submitted to the next page, it cannot or cannot be expressed explicitly. In a word, you cannot see where hidden is on the page. The most useful value is the value of hidden .) Hidden fields usually store a default value, and their values can also be modified by JavaScript.

<Form name = "FormHidden"> your hidden info here: <input type = "hidden" name = "hiddeninfo" value = "Loong's Blog"> </form> <script> alert ("the value of the hidden field is" + document. formHidden. hiddeninfo. value) </script>

Effect:

<Input type = "image"/>;

Define the image form submission button.

<form>   <input type="image" src="submit.gif" alt="Submit" /></form> 
  • <Input type = "password"/>;

Define the password field. The characters in the password field are masked (displayed as asterisks or origin points ).

<form>  Email:<input type="text" name="email" /><br />  Password: <input type="password" name="pwd" maxlength="8" /><br /></form>

Effect:

<Input type = "radio"/>;

Define the single-choice button, which appears in the page setting for multiple choices. The parameter also has name, value, and special parameter checked. Unlike the checkbox, the name value must be the same; otherwise, one more parameter cannot be selected. Of course, the value is also submitted to the processing page.

<Form action = "/example/html/form_action.asp" method = "get"> <input type = "radio" name = "sex" value = "male"/> Male <br /> <input type = "radio" name = "sex" value = "female"/> Female <br/> </form>

/* The following is an example of different name values, you cannot select one of them. */<form> <input type = "radio" name = "checkit1" value = "a" checked> <br> <input type =" radio "name =" checkit2 "value =" B "> <br> <input type =" radio "name =" checkit3 "value =" c "> <br> </form>

Effect:

<Input type = "submit"/>;

<Input type = "reset"/>;

Define the "Submit" and "reset" buttons. The "Submit" button is used to send form data to the server. Data is sent to the page specified in the action attribute of the form. The reset button is used to quickly clear all filled content.

<form>  Email: <input type="text" name="email" /><br />  Password: <input type="text" name="pin" maxlength="4" /><br />  <input type="reset" value="Reset" />  <input type="submit" value="Submit" /></form>

Effect:

<Input type = "submit"/>;

The input type is text, which is the most common and most commonly used. For example, you can enter the user name, register and enter the phone number, email, home address, and so on. Of course, this is also the default Input type.
Parameter name: the name of the text input box.
Parameter size: the length of the input box.
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 cannot be added or modified.

<form action="/example/html/form_action.asp" method="get">  <p>Email: <input type="text" name="email" /></p>  <p>Password: <input type="text" name="pin" maxlength="18" /></p>  </form>

Effect: see the password section.

 



Related Article

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.