HTML article: How to implement the input box effect in web pages (detailed code explanation)-HTML Tutorial-php.cn

HTML article: How to implement the input box effect in web pages (detailed code explanation)

奋力向前

Release： 2021-08-17 17:06:00

Original

18485 people have browsed it

In the previous article "Teach you step by step to add ordered lists and unordered lists to html text (detailed code explanation)", I introduced how to use html to add ordered lists to text. with unordered lists. The following article will introduce to you how to implement the input box effect in HTML web pages. Let's see how to do it together.

HTML article: How to implement the input box effect in web pages (detailed code explanation)

## Tag specification: collect user information and input fields in many forms, such as: text fields, check boxes, Radio buttons, etc.

How to add an input box

This type tells what type it is, such as txt text type, which is the default A type, let me give you a code example to see what it looks like?

Code example

<body>
<input type="text">
</body>

Copy after login

Code effect

## When the code is finished, I believe this is familiar to everyone. This is an input box. We can try it by adding a line of text in front of it using

Code example

<body>
<p>用户名：</p>
<input type="text">
</body>

Copy after login

Code effect

## You can see the username, but there will be something after the username, add the password, we use

to make it easier to see, and put it into a line.

Code example

<body>
<div>
用户名：
<input type="text">
</div> 
</body>

Copy after login

Code effect

The end is almost like this Is there a password in a state? HTML article: How to implement the input box effect in web pages (detailed code explanation)

Code example

<body>
<div>
用户名：
<input type="text">
</div> 
<div>
密码：
<input type="text">
</div> 
</body>

Copy after login

Code effect

This is a bit inappropriate, because everyone can see this password, but normally the password is invisible. Use password

to achieve password effects.

Code example

密码：
<input type="password">

Copy after login

Code effect

The password is almost in this state , a relatively common thing on this web page. How to implement the checkbox next? You can use HTML article: How to implement the input box effect in web pages (detailed code explanation) checkbox

to achieve

code example

<div>
1选项
<input type="checkbox">
2选项
<input type="checkbox">
3选项
<input type="checkbox">
</div>

Copy after login

code effect

This is the check box. Next, let’s talk about the radio button. This is more commonly used on the Internet. We use this. Input can be done using HTML article: How to implement the input box effect in web pages (detailed code explanation) radio

To implement the radio button.

Code example

单选：
<input type="radio">

Copy after login

Code effect

In addition to this radio, color is also A relatively present thing. HTML article: How to implement the input box effect in web pages (detailed code explanation)

Code example

<div>
<input type="color">
</div>

Copy after login

Code effect

##As you can see, this is something interesting. It can change the color directly. ok, done!

Recommended learning:

Html video tutorial

The above is the detailed content of HTML article: How to implement the input box effect in web pages (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!