Front-end development: html-form

HTML Form

A form is a region that contains form elements.

Form elements allow users to enter content in the form, such as text fields (TEXTAREA), drop-down lists, radio boxes (radio-buttons), check boxes (checkboxes), and so on.

The form uses the form label <form> to set:

<form>.input element .</form>

　　

HTML Form-INPUT element

In most cases, the form label used is the input label (<input>).

The input type is defined by the type attribute. Most of the input types that are often used are as follows:

text fields

Text fields are set by <input type= "text" > tags, and text fields are used when the user is typing letters, numbers, and so on in the form.

<form>    user name: <input type= "text" name= "username" ><br></form>

　　

Password field:

The password field is defined by the label <input type= "Password" >:

Show effect

Radio button (Radio Buttons)

<input type= "Radio" name= "Sex" value= "male" > Male <input type= "Radio" name= "Sex" value= "female" > Women <br>

　　

Check button (checkboxes)

<input type= "checkbox" > Defines the check box. The user needs to select one or several options from several given selections.

   <p>        Hobbies:        <input type= "checkbox" Name= "Chkhobby" value= "basketball" > Play basketball        <input type= "checkbox" Name= "Chkhobby" value= "Run" > Run marathon        <input type= "checkbox" Name= "Chkhobby" value= "ping-pong" > Play table Tennis <br>    </p>

　　

Submit button (Submit buttons)

<input type= "Submit" > defines the Commit button.

When the user clicks the Confirm button, the contents of the form are transferred to another file. The action properties of the form define the file name of the destination file. This file, which is defined by the action attribute, is usually processed in connection with the input data received. :

<form name= "Input" action= "www.baidu.com" method= "Get" >

   <p>        <input type= "Submit" Name= "BTNSBT" value= "Submit" >        <input type= "reset" name= "Btnrst" value= " Reset >        <input type= "button" Name= "btnbtn" value= "normal button" >    </p>

Other examples:

Simple drop-down box:

<!---simple drop-down box-    <p>        <select name= "sel" >            <option value= "Shenzhen" > Shenzhen </option>            <option value= "Hunan" > Hunan </option>            <option value= "Shanghai" > Shanghai </option>            <option Value= "Beijing" > Beijing </option>        </select>    </p>

　　

Default Selection box:

  <p>        <select name= "sel" >            <option value= "Shenzhen" > Shenzhen </option>            <option value= " Hunan "selected> Hunan </option>            <option value=" Shanghai "> Shanghai </option>            <option value=" Beijing "> Beijing </option>        </select>    </p>

　　

Text field (Textarea)

  <textarea rows= "Ten" cols= ">"        I am a text box    </textarea>

　　

A form with a border

  <fieldset>        <legend> User registration information:</legend>    user name: <input type= "text" name= "username" ><br>    Secret  Code: <input type= "password" name= "password" ><br>    <!--Radio Box--    <p>        user gender:        <input type= "Radio" name= "Sex" value= "male" > Male        <input type= "Radio" name= "Sex" value= "women" > Women <br>    </p>    <!---multiple marquee--    <p>        Hobbies:        <input type= "checkbox" Name= "Chkhobby" Value= "basketball" > Play basketball        <input type= "checkbox" Name= "Chkhobby" value= "Run" > Run marathon        <input type= "checkbox" Name= "Chkhobby" value= "ping-pong" > Play table Tennis <br>    </p>    <!--button--    <p>        < Input type= "Submit" Name= "BTNSBT" value= "Submit" >        <input type= "reset" name= "Btnrst" value= "reset" >        < Input type= "button" Name= "btnbtn" value= "normal button" >    </p>    </fieldset>

　　

Send e-mail:

<form action= "Mailto:[email protected]" method= "POST" enctype= "Text/plain" >    user name: <input type= "text" name = "username" value= "Enter user name" ><br>    e-mail:<input type= "text" name= "Mail" value= "email address" ><br>    content: <input type= "text" name= "content" value= "enter message content" ><br>    <input type= "Submit" value= "send" >    < Input type= "reset" value= "reset" ></form>

　　

Upload file:

<p>        <input type= "file" name= "txtfile" >    </p>

　　

HTML Form Labels

　　

Front-end development: html-form