- Set width of an input text box in HTML, CSS, and JavaScript
- 1. Set width in HTML
- 2. Set width with CSS
- HTML
- CSS
- HTML
- CSS
- 3. Set width with JavaScript
- JS
- HTML
- CSS Forms
- Styling Input Fields
- Example
- Padded Inputs
- Example
- Bordered Inputs
- Example
- Example
- Colored Inputs
- Example
- Focused Inputs
- Example
- Example
- Input with icon/image
- Example
- Animated Search Input
- Example
- Styling Textareas
- Example
- Styling Select Menus
- Example
- Styling Input Buttons
- Example
- Responsive Form
- Aligned Form
- Что такое длина Input, как изменить размер текстового поля
- Как выставляется ширина(длина, размер) «input» в HTML на примере
- Заключение
Set width of an input text box in HTML, CSS, and JavaScript
This post will discuss how to set the width of an input text box in HTML, CSS, and JavaScript.
1. Set width in HTML
In HTML, you can use the width attribute to set the width of an element.
Alternatively, you can also use the size attribute to define the width of the .
2. Set width with CSS
It is good practice to separate CSS from HTML markup. The idea is to define a class to set the width CSS property.
HTML
CSS
Alternatively, you can also use the CSS selector of an input text box for setting the width CSS property.
HTML
CSS
3. Set width with JavaScript
With JavaScript, you can use the setAttribute() method to set the value of the size attribute on the input text box.
You can also dynamically change the width of a text box to match the length of the input. We can easily do this by setting the size attribute on key events.
JS
HTML
That’s all about setting the width of an input text box in HTML, CSS, and JavaScript.
Average rating 4.01 /5. Vote count: 83
No votes so far! Be the first to rate this post.
We are sorry that this post was not useful for you!
Tell us how we can improve this post?
Thanks for reading.
Please use our online compiler to post code in comments using C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and help us grow. Happy coding 🙂
This website uses cookies. By using this site, you agree to the use of cookies, our policies, copyright terms and other conditions. Read our Privacy Policy. Got it
CSS Forms
The look of an HTML form can be greatly improved with CSS:
Styling Input Fields
Use the width property to determine the width of the input field:
Example
The example above applies to all elements. If you only want to style a specific input type, you can use attribute selectors:
- input[type=text] — will only select text fields
- input[type=password] — will only select password fields
- input[type=number] — will only select number fields
- etc..
Padded Inputs
Use the padding property to add space inside the text field.
Tip: When you have many inputs after each other, you might also want to add some margin , to add more space outside of them:
Example
Note that we have set the box-sizing property to border-box . This makes sure that the padding and eventually borders are included in the total width and height of the elements.
Read more about the box-sizing property in our CSS Box Sizing chapter.
Bordered Inputs
Use the border property to change the border size and color, and use the border-radius property to add rounded corners:
Example
If you only want a bottom border, use the border-bottom property:
Example
Colored Inputs
Use the background-color property to add a background color to the input, and the color property to change the text color:
Example
Focused Inputs
By default, some browsers will add a blue outline around the input when it gets focus (clicked on). You can remove this behavior by adding outline: none; to the input.
Use the :focus selector to do something with the input field when it gets focus:
Example
Example
Input with icon/image
If you want an icon inside the input, use the background-image property and position it with the background-position property. Also notice that we add a large left padding to reserve the space of the icon:
Example
input[type=text] <
background-color: white;
background-image: url(‘searchicon.png’);
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
>
Animated Search Input
In this example we use the CSS transition property to animate the width of the search input when it gets focus. You will learn more about the transition property later, in our CSS Transitions chapter.
Example
input[type=text] <
transition: width 0.4s ease-in-out;
>
input[type=text]:focus width: 100%;
>
Styling Textareas
Tip: Use the resize property to prevent textareas from being resized (disable the «grabber» in the bottom right corner):
Example
textarea <
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
>
Styling Select Menus
Example
select <
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
>
Styling Input Buttons
Example
input[type=button], input[type=submit], input[type=reset] <
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
>
/* Tip: use width: 100% for full-width buttons */
For more information about how to style buttons with CSS, read our CSS Buttons Tutorial.
Responsive Form
Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.
Advanced: The following example uses media queries to create a responsive form. You will learn more about this in a later chapter.
Aligned Form
An example of how to style labels together with inputs to create a horizontal aligned form:
Что такое длина Input, как изменить размер текстового поля
Важнейшим атрибутом у тега «input» является «type». Именно он определяет какое поле будет перед нами: текстовое, для пароля, чекбокс, радио и др. Поэтому, чтобы определить тег «input», как текстовое поле нужно воспользоваться вот таким синтаксисом:
Обозначив тег «input» таким образом мы получим текстовое поле в форме, но оно будет с «гибким» размером. То есть, оно растянется на всю ширину контейнера, в котором мы обозначили тег «input». Такой подход не всегда уместен. Иногда нам нужно чтобы текстовое поле было определенного размера. Мы можем это сделать, если задействовать CSS-свойство «width» для конкретного поля «input» или прямо внутри самого тега мы можем задействовать свойство «size». В свойстве «size» нужно прописать какое-то число, где число будет определять ширину поля, а обозначать количество видимых символов.
Кстати, когда говорят «длина input» – это немного не корректное высказывание, потому что правильнее будет говорить «ширина input» или «размер input».
Как выставляется ширина(длина, размер) «input» в HTML на примере
Давайте сверстаем небольшую HTML-форму, где у нас будет текстовое поле «input» заданной ширины. Код будет вот таким:
#userForm
width: 600px; /*Определяем пиксельную ширину текстового поля с помощью CSS-свойств */
>
Введите ваше имя:
Результат этой формы можно увидеть на рисунке ниже:
Важно отметить, что размер текстового поля «input» в CSS-свойствах можно определить разными единицами измерения: в пикселях, процентах и других измерительных единицах. А в свойстве «size» можно указать только количество видимых текстовых символов в виде числа. На примере, что мы привели выше, мы указали оба варианта определения размера поля «input». На практике так делать не надо, потому что в этом случае сработает только CSS-свойство, так как оно по иерархии главнее, чем внутреннее свойство «size».
Заключение
Сегодня мы рассказали, что длина, ширина и размер текстового поля «input» в HTML – это определения одного и того же свойства и правильно его называть «ширина input». На примере мы показали, что установить размер текстового поля всегда можно при помощи CSS-свойства «width», либо использовать внутреннее свойства текстового поля «input» – «size».
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.