Другое

Что такое длина Input, как изменить размер текстового поля

Lorem ipsum dolor

Длина – это атрибут тега «input», который помогает установить размер текстового поля для пользователя. Тег «input» является основным тегом, когда дело доходит до создания пользовательских форм на HTML. Чтобы создать определенную часть формы с помощью тега «input», нужно правильно определить атрибут. Например, с  помощью атрибутов тега «input» можно создать следующие поля:

  • пункт для ввода текста, где можно собирать фамилию, имя, отчество или короткое сообщение пользователя;

  • пункт для ввода пароля;

  • открыть пользователям возможность выбирать пункты радио-списка;

  • открыть пользователям возможность проводить множественный выбор из списка чекбокса;

  • скрытые поля, которые появляются только при определенных условиях;

  • разнообразные кнопки, в том числе и кнопки для отправки формы, очистки формы;

  • и др.

В HTML5 у тега «input» насчитывается несколько десятков разнообразных атрибутов, которые помогают создавать разнообразные поля. Тег «input» в основном используется внутри тега «form», однако в HTML5 он приобрел самостоятельность и может применяться отдельно. 

Разнообразие атрибутов тега «input» велико. Поэтому, постепенно, в своих статьях мы будем  рассказывать о каждом. Сегодня мы подробнее остановимся на атрибуте, определяющем текстовое поле формы и подробнее расскажем, что такое длина или размер «input».

Атрибут текстового поля: длина «input»

Важнейшим атрибутом у тега «input» является  «type». Именно он определяет какое поле будет перед нами: текстовое, для пароля, чекбокс, радио и др. Поэтому, чтобы определить тег «input», как текстовое поле нужно воспользоваться вот таким синтаксисом:

<input type="text"/>

Обозначив тег «input» таким образом мы получим текстовое поле в форме, но оно будет с «гибким» размером. То есть, оно растянется на всю ширину контейнера, в котором мы обозначили тег «input». Такой подход не всегда уместен. Иногда нам нужно чтобы текстовое поле было определенного размера. Мы можем это сделать, если задействовать CSS-свойство «width» для конкретного поля «input» или прямо внутри самого тега мы можем задействовать свойство «size». В свойстве «size» нужно прописать какое-то число, где число будет определять ширину поля, а обозначать количество видимых символов.

Кстати, когда говорят «длина input» – это немного не корректное высказывание, потому что правильнее будет говорить «ширина input» или «размер input».

Как выставляется ширина(длина, размер) «input» в HTML на примере

Давайте сверстаем небольшую HTML-форму, где у нас будет текстовое поле «input» заданной ширины. Код будет вот таким:

<!DOCTYPE html>

<html>

 <head>

  <metacharset="utf-8">

  <title>Ширина текстового поля</title>

    <style>

   #userForm {

    width: 600px; /*Определяем пиксельную ширину текстового поля с помощью CSS-свойств */

   } 

  </style>

 </head>

 <body>

  <form method="post" action="myhandler.php">

   <p>Введите ваше имя:</p>

   <p><input  type="text" name="usernameform" id="userForm" size="55" />

   <input type="submit" name="SubmitForm" value="Послать" /></p>

  </form>

 </body>

</html>

 

Результат этой формы можно увидеть на рисунке ниже:

Как выставляется ширина(длина, размер) «input» в HTML на примере

Важно отметить, что размер текстового поля «input» в CSS-свойствах можно определить разными единицами измерения: в пикселях, процентах и других измерительных единицах. А в свойстве «size» можно указать только количество видимых текстовых символов в виде числа. На примере, что мы привели выше, мы указали оба варианта определения размера поля «input». На практике так делать не надо, потому что в этом случае сработает только CSS-свойство, так как оно по иерархии главнее, чем внутреннее свойство «size».

Заключение 

Сегодня мы рассказали, что длина, ширина и размер текстового поля «input» в HTML – это определения одного и того же свойства и правильно его называть «ширина input». На примере мы показали, что установить размер текстового поля всегда можно при помощи CSS-свойства «width», либо использовать внутреннее свойства текстового поля «input» – «size».

Схожие статьи

Как правильно общаться с людьми на работе: основные ошибки и советы
Другое

Как правильно общаться с людьми на работе: основные ошибки и советы

Профессия дизайнер пользовательских интерфейсов: коротко о главном
Другое

Профессия дизайнер пользовательских интерфейсов: коротко о главном

Instant articles Facebook: что это за функция и чем она полезна?
Другое

Instant articles Facebook: что это за функция и чем она полезна?

Гугл фреймворк: что это такое? Описание Google Service Framework
Другое

Гугл фреймворк: что это такое? Описание Google Service Framework