How to style a textbox in HTML

In web design, the text box is a commonly used element that allows users to enter information on the page. This article will introduce how to set up text boxes in HTML.

1. Using the <input> tag

To create a text box, use the <input> tag and set its type to "text". Here is a basic example:

<input>

In this example, we create a text box and name it "username".

2. Set the text box size and maximum length

You can use the "size" attribute to set the size of the text box, for example:

<input>

In this example , we set the size of the text box to 30 characters wide.

In addition, you can also use the "maxlength" attribute to set the maximum length of the text box, for example:

<input>

In this example, we set the maximum length of the text box to 20 characters.

3. Set default value and placeholder

You can use the "value" attribute to set the default value of the text box, for example:

<input>

In this example , we set the default value of the text box to "Please enter the user name".

In addition, you can also use the "placeholder" attribute to set the placeholder of the text box, for example:

<input>

In this example, we set the placeholder of the text box to "Please enter username". The placeholder will automatically disappear when the user enters the text box.

4. Using the tag

In addition to the <input> tag, you can also use the tag to create a multi-line text box. Here is an example:

<textarea></textarea>

In this example, we create a multi-line text box and name it "content". We also set the number of rows of the text box to 5 and the number of columns to 30.

5. Summary

It is very simple to set a text box in HTML. You only need to use the <input> or tag and set the corresponding attributes. Through these properties, we can control the size, maximum length, default value, placeholder, etc. of the text box to achieve a better user experience.

The above is the detailed content of How to style a textbox in HTML. For more information, please follow other related articles on the PHP Chinese website!