Syntax
// For CSS width
<input type="text" id="name" style="width: 200px;">
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < style type = "text/css" > body { text-align: center; } label { font-size: 18px; } input { margin: 7px; padding: 2px; width: 90px; } </ style > </ head > < body > < h1 style = "color: green;" > w3wiki </ h1 > < h3 > Specify width of input elements by using the "width" attribute </ h3 > < div > < label for = "name" >Enter Name:</ label > < input type = "text" id = "name" > < br > < label for = "name" >Enter Date:</ label > < input type = "date" id = "last name" > </ div > </ body > </ html > |
Output:
How to specify the width of an input element in HTML5 ?
In this article, we’ll focus on setting the width of input elements in a user-friendly and straightforward manner. To achieve this, we can utilize either the “size” attribute or the “width” attribute.
Let’s start by creating a container using a div element where we’ll place two input fields—one for names and the other for dates. For the name input, we’ll use the “text” type along with the “size” attribute to control its width. For the date input, we’ll use the “date” type and specify the width using the “width” attribute, as the “size” attribute doesn’t apply to date inputs.
Table of Content
- Using “size” Attribute
- Using “width” Property