How can we add character width to <code><input></code> tag in HTML?-HTML Tutorial-php.cn

How can we add character width to tag in HTML?

WBOY

Release： 2023-08-26 12:41:02

forward

1352 people have browsed it

How can we add character width to <code><input></code> tag in HTML?

In this article, we will demonstrate how to add width in characters to an input box in HTML.

The size attribute of <input> is used to specify the visible width of the <input> element, in characters. Input fields accept text, search, phone, URL, email, and password. Although somewhat indirectly, its display size may be affected. Nonetheless, the length of the expected input is not really limited by the size parameter

Syntax

The following is the syntax of

<object> ... </object>

Copy after login

Let’s take a look at the following example to understand how to add character width to an input box in HTML.

Example 1

In the following example, we use size=35 as the size of the input field.

<!DOCTYPE html>
<html>
<body>
   FirstName:<input type="text"
   value="Tutorials"><br>
   Lastname<input type="text"
   size="35"
   value= "Point">
</body>
</html>

Copy after login

When the script executes, it will generate an output showing the input field with firstname as default size and lastname as size=35, as we mentioned in the script on the web page.

Example 2

Consider the following example, we have used a placeholder of size 24.

<!DOCTYPE html>
<html>
<body>
   <form>
      <div>
         <label for="Name">Enter FullName:</label>
         <input type="text" id="Name" name="Name" placeholder="All Capital Letters" size="24" />
      </div>
      <div>
         <button>Submit</button>
      </div>
   </form>
</body>
</html>

Copy after login

After running the above script, an output will be generated on the web page containing an input field that has a placeholder of size = 24 that says "ALL CAPS", and a submit button.

Example 3

Let's consider another example where we use minimum and maximum length.

<!DOCTYPE html>
<html>
<body>
   <form>
      <div>
         <label for="Name">Name: </label>
         <input type="text" id="Name" name="Name" required size="10" minlength="4" maxlength="8" />
         <span class="validity"></span>
      </div>
      <div>
         <button>Submit</button>
      </div>
   </form>
</body>
</html>

Copy after login

After running the above script, the output window will pop up, showing the name input field with size=10, min and max attributes on the web page, and the submit button.

The above is the detailed content of How can we add character width to tag in HTML?. For more information, please follow other related articles on the PHP Chinese website!