How does the input form make multi-line text input boxes? An article teaches you how to use the input tag

This article is mainly about the HTML input tag how to make a landing interface introduction, there are text boxes, password boxes, radio boxes, multi-box, submit and reset the use of buttons, fully explain the use of the HTML form input tag details. Now, let's take a look at this article.

First, let's take a look at how to make a text box:

<form action= "URL address" method= "Get/post" name= "form name" ><p> This is a text box </p> user name: <input type= "text" Name= " Username ">

So the text box of a basic user name comes out and we look at the effect:

If it is a user name input box, is not very familiar with many sites have this, but they add a lot of other elements to make the form more beautiful, which we will learn later. (Want to see more on the PHP Chinese web HTML online video course)

Second, now let's talk about how to make a password box:

We know that the password is personal privacy, everyone does not want their password to be seen by others when they input, so basically all the password boxes in the site password is confidential, the input is an asterisk or a small dot display.

Now let's take a look at how this input tag's password box is made.

<form action= "URL address" method= "Get/post" name= "form name" ><p> This is a text box </p> user name: <input type= "text" Name= " Username "></br> Secret &nbsp;&nbsp;&nbsp; Code: <input type=" password "name=" password ">

As the above code, we should be able to guess what this is, first look at:

You see, if there is no three characters, the password and user name will not be aligned, usually with cascading style sheet to align, but now we only speak HTML, now do not say CSS, so now I use three space characters to the password and user name alignment, this is the simplest way.

Maybe because of the obsessive-compulsive disorder, anyway, this effect is anyone can see, if not aligned, it is a lot of ugly.

Three, the Password box has been read, and now let's look at how to make a radio box:

Let's take the case of singles and men and women (of course, the third class does not say)

<form action= "URL address" method= "Get/post" name= "form name" ><p> This is a text box </p> user name: <input type= "text" Name= " Username "></br> Secret &nbsp;&nbsp;&nbsp; Code: <input type=" password "name=" password "><p> Radio Box </p> Radio: <input type= "Radio" name= "Sex" value= "nan" > Male      <input type= "Radio" name= "Sex" value= "NV" > Women

Let's look at the effect.

This is the radio box, is also a commonly used framework bar, male and female can only choose one, not two are selected.

Four, with a single box, then let's talk about multi-box:

<form action= "URL address" method= "Get/post" name= "form name" ><p> This is a text box </p> user name: <input type= "text" Name= " Username "></br> Secret &nbsp;&nbsp;&nbsp; Code: <input type=" password "name=" password "><p> Radio Box </p> Radio: <input type= "Radio" name= "Sex" value= "nan" > Male      <input type= "Radio" name= "Sex" value= "NV" > Women <p> Multi Box </p> multiple selection: <input type= "checkbox" Name= "n" > Eating      <input type= "checkbox" Name= "n" > Sleeping      <input type= "checkbox" Name= "n" > hit the peas      <input type= "checkbox" Name= "n" > Water

Effect

This picture of the above things are selected, multi-box is can be selected, of course, you can also set the default selection of one, only need to add checked= "checked" This property, in which multi-box add can be displayed in a refresh on the page, this is the default selected effect.

Five, say so much, then talk about the last Commit button and reset button:

These two are very important buttons, the Reset button can be selected on your Web page or fill in a button to restore the same thing. Submission is to submit all your completed and selected submissions to the background. Here's a look at the code:

<form action= "URL address" method= "Get/post" name= "form name" ><p> This is a text box </p> user name: <input type= "text" Name= " Username "></br> Secret &nbsp;&nbsp;&nbsp; Code: <input type=" password "name=" password "><p> Radio Box </p> Radio: <input type= "Radio" name= "Sex" value= "nan" > Male      <input type= "Radio" name= "Sex" value= "NV" > Women <p> Multi Box </p> multiple selection: <input type= "checkbox" Name= "n" > Eating      <input type= "checkbox" Name= "n" > Sleeping      <input type= "checkbox" Name= "n" > hit the peas      <input type= "checkbox" Name= "n" > Drink water <p> reset button </p > Reset: <input type= "reset" Name= "" ><p> submit button </p> Submit: <input type= "Submit" Name= "" >

Because there is no backstage, so did not fill in the background address. But it doesn't affect the effect.

This is a page to fill in most of the window of registration, it is very simple, the above is a lot of the form of a fixed, there are individual attributes will be slowly learned in the future. (Want to see more, Welcome to www.php.cntopic.alibabacloud.com)

This is the end of this article, the above code only more practice to be skillful, the problem can be asked below