Css input: Стилизация текстовых полей формы — ИТ Шеф

• Css
• 4 Фев, 1982
• 0

.feedback-form {
  &__title {
    font-size: 25px;
    margin-bottom: 35px;
  }
  &__label {
    display: block;
    position: relative;
    span {
      display: block;
      position: absolute;
      width: 100%;
      color: #777777;
      font-size: 15px;
      left: 0;
      bottom: 7px;
      top: 20px;
      transition: all .3s .1s;
    }
  }
  &__input {
    display: block;
    background: none;
    border: none;
    border-bottom: 1px solid #b8b6b4;
    padding: 20px 0 7px;
    width: 100%;
    margin-bottom: 20px;
    top: 20px;
    &:focus {
      color: #222222;
      border-bottom: 1px solid #61574c;
    }
    &:focus+span {
      top: 0;
      font-size: 12px;
      transition: all .  3s;
    }
    &:required+span {
      top: 0;
      font-size: 12px;
    }
  }
  &__btn {
    color: #c58d4c;
    border: none;
    cursor: pointer;
    margin-top: 20px;
  }
}

<div>
  <div>Связаться с нами</div>
  <form action="#" method="post">
    <label>
      <input type="text" name="name">
      <span>Укажите ваше имя *</span>
    </label>

    <label>
      <input type="email" name="email">
      <span>Почту для обратной связи*</span>
    </label>

    <label>
      <input type="tel" name="phone">
      <span>Номер телефона *</span>
    </label>
    <label>
      <input type="tel" name="phone">
      <span>Ваше сообщение *</span>
    </label>

    <button type="submit">Отправить</button>
  </form>

body {
	padding: 20px;
}

label {
	position: relative;
}

#ph {
	padding: 5px;
}

.ph {
	position: absolute;
	transition: .2s;
	left: 3px;
	top: 2px;
	font-size: 14px;
}

#ph:focus ~ .ph,
#ph:valid ~ .ph {
	top: -25px;
	font-size: 12px;
}

<label for="ph">
		<input type="text" required>
		<span>Placeholder</span>
	</label>

input {
    color: initial;
    display: inline-block;
    text-align: start;
    background-color: white;
    cursor: text;
    font: 400 13.3333px Arial;
    padding: 1px 0px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
}

Попробуйте сами »

Подписи к значкам

Свяжитесь с нами

❮ Предыдущий Далее ❯

НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА

КОД ИГРЫ

Играть в игру

Лучшие учебники

9003 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

HTMLInputElement — веб-API | MDN

Интерфейс HTMLInputElement предоставляет специальные свойства и методы для управления параметрами, компоновкой и представлением элементов .

Некоторые свойства применяются только к тем типам элементов ввода, которые поддерживают соответствующие атрибуты.

выровнять Устаревший

string : Представляет выравнивание элемента. Вместо этого используйте CSS.

автокапитализация Экспериментальный

строка : Определяет поведение использования заглавных букв для пользовательского ввода. Допустимые значения: нет , выкл , символов , слов или предложений .

значение по умолчанию

string : Возвращает/устанавливает значение по умолчанию, изначально указанное в HTML, который создал этот объект.

имя_каталога

строка : Возвращает / устанавливает направленность элемента.

режим ввода

Предоставляет браузерам подсказку относительно типа конфигурации виртуальной клавиатуры, которую следует использовать при редактировании этого элемента или его содержимого.

этикетки Только чтение

NodeList массив: Возвращает список из элементов , которые являются метками для этого элемента.

список Только чтение

HTMLЭлемент : Возвращает элемент, на который указывает атрибут списка . Свойство может иметь значение null , если в том же дереве не найден элемент HTML.

несколько

логический : Возвращает/устанавливает атрибут множественного элемента, указывающий, возможно ли более одного значения (например, несколько файлов).

имя

string : Возвращает/устанавливает атрибут name элемента, содержащий имя, которое идентифицирует элемент при отправке формы.

ступенька

string : Возвращает/задает атрибут step элемента, который работает с min и max для ограничения приращений, с которыми может быть установлено числовое значение или значение даты и времени. Это может быть строка , любое число или положительное число с плавающей запятой. Если это не установлено на любой , элемент управления принимает только значения, кратные значению шага больше минимума.

тип

строка : Возвращает/задает атрибут type элемента, указывающий тип отображаемого элемента управления. Возможные значения см. в документации по атрибуту типа .

карта использования Устаревший

строка : Представляет карту изображения на стороне клиента.

значение

строка : Возвращает/устанавливает текущее значение элемента управления. Если пользователь вводит значение, отличное от ожидаемого, это может вернуть пустую строку.

значениеAsDate

Дата : Возвращает/устанавливает значение элемента, интерпретируемое как дата, или null , если преобразование невозможно.

значениеAsNumber

double : Возвращает значение элемента, интерпретируемое как одно из следующего, в следующем порядке: значение времени, число или NaN , если преобразование невозможно

форма Только чтение

HTMLFormElement : Возвращает ссылку на родителя

элемент.

formAction

string : Возвращает/устанавливает атрибут formaction элемента, содержащий URL-адрес программы, которая обрабатывает информацию, переданную элементом. Это переопределяет атрибут действия родительской формы.

формаEnctype

string : Возвращает/устанавливает элемент formenctype , содержащий тип контента, который используется для отправки формы на сервер. Это переопределяет атрибут enctype родительской формы.

метод формы

строка : Возвращает/устанавливает атрибут formmethod элемента, содержащий HTTP-метод, который браузер использует для отправки формы. Это переопределяет атрибут метода родительской формы.

форма NoValidate

boolean : Возвращает/устанавливает атрибут formnovalidate элемента, указывающий, что форма не должна проверяться при ее отправке. Это переопределяет атрибут novalidate родительской формы.

формаЦель

строка : Возвращает/устанавливает атрибут formtarget элемента, содержащий имя или ключевое слово, указывающее, где отображать ответ, полученный после отправки формы. Это отменяет цель атрибут родительской формы.

Свойства экземпляра, применимые к любому типу элемента ввода, который не скрыт

автофокус

boolean : Возвращает/задает атрибут autofocus элемента, который указывает, что элемент управления формы должен иметь фокус ввода при загрузке страницы, если только пользователь не переопределит его, например, введя другой элемент управления. Только один элемент формы в документе может иметь автофокус атрибут.

инвалид

boolean : Возвращает/устанавливает атрибут disabled элемента, указывающий, что элемент управления недоступен для взаимодействия. Введенные значения не будут отправлены вместе с формой. См. также только для чтения .

требуется

логический : Возвращает/устанавливает элемент требуется атрибут , указывающий, что пользователь должен ввести значение перед отправкой формы.

validationMessage Только чтение

строка : Возвращает локализованное сообщение, описывающее ограничения проверки, которым элемент управления не удовлетворяет (если таковые имеются). Это пустая строка, если элемент управления не является кандидатом на проверку ограничения ( willValidate is false ) или удовлетворяет своим ограничениям. Это значение может быть установлено с помощью метод setCustomValidity() .

достоверность Только чтение

ValidityState : Возвращает текущее состояние допустимости элемента.

будет проверять Только чтение

логическое значение : Возвращает , является ли элемент кандидатом на проверку ограничения. Это false , если какие-либо условия препятствуют проверке ограничений, в том числе: его тип является одним из скрытых , сброса или кнопок , он имеет предка или его свойство disabled равно true .

Свойства экземпляра, применимые только к элементам типа checkbox или radio

проверено

логическое значение : Возвращает/устанавливает текущее состояние элемента.

по умолчаниюПроверено

логическое значение : Возвращает/устанавливает состояние переключателя или флажка по умолчанию, как изначально указано в HTML, который создал этот объект.

неопределенный

логическое значение : Возвращает независимо от того, находится ли флажок или переключатель в неопределенном состоянии. Для флажков эффект заключается в том, что внешний вид флажка каким-то образом скрыт/затенен серым цветом, чтобы указать, что его состояние неопределенно (не установлен, но не снят). Не влияет на значение проверил атрибут , и установка флажка установит значение false.

Свойства экземпляра, применимые только к элементам типа image

alt

string : Возвращает/устанавливает атрибут alt элемента, содержащий альтернативный текст для использования.

высота

строка : Возвращает/устанавливает элемент height Атрибут, определяющий высоту изображения, отображаемого для кнопки.

источник

строка : Возвращает/задает атрибут src элемента, который указывает URI для местоположения изображения, отображаемого на графической кнопке отправки.

ширина

string : Возвращает/устанавливает ширину элемента 9Атрибут 0465, который определяет ширину изображения, отображаемого для кнопки.

Свойства экземпляра, которые применяются только к элементам типа файла

принять

string : Возвращает/устанавливает атрибут accept элемента, содержащий разделенный запятыми список типов файлов, которые можно выбрать.

разрешения Нестандартный

логическое значение : часть нестандартного API загрузки каталогов. Указывает, разрешать ли выбирать каталоги и файлы в списке файлов. Реализовано только в Firefox и скрыто за настройкой.

файлы

FileList : Возвращает/задает список объектов File , представляющих файлы, выбранные для загрузки.

webkitdirectory

логическое значение : Возвращает атрибут webkitdirectory . Если true , интерфейс средства выбора файловой системы принимает только каталоги вместо файлов.

webkitEntries

FileSystemEntry array: Описывает выбранные в данный момент файлы или каталоги.

Свойства экземпляра, которые применяются только к видимым элементам, содержащим текст или числа

автозаполнение

string : Возвращает/задает атрибут autocomplete элемента, указывающий, может ли значение элемента управления быть автоматически заполнено браузером.

макс.

string : Возвращает/устанавливает атрибут max элемента, содержащий максимальное (числовое или дата-время) значение для этого элемента, которое не должно быть меньше минимального ( мин атрибут) значение.

максимальная длина

unsigned long : Возвращает/устанавливает атрибут maxlength элемента, содержащий максимальное количество символов (в кодовых точках Unicode), которое может иметь значение.

мин

string : Возвращает/устанавливает атрибут min элемента, содержащий минимальное (числовое или дата-время) значение для этого элемента, которое не должно быть больше максимального ( максимальное значение атрибута ).

минДлина

unsigned long : Возвращает/устанавливает атрибут minlength элемента, содержащий минимальное количество символов (в кодовых точках Unicode), которое может иметь значение.

узор

string : Возвращает/устанавливает атрибут шаблона элемента, содержащий регулярное выражение, по которому проверяется значение элемента управления. Используйте заголовок атрибут для описания шаблона, чтобы помочь пользователю. Этот атрибут применяется только в том случае, если значением атрибута type является text , search , tel , url ​​ или email .

заполнитель

строка : Возвращает/задает атрибут заполнителя элемента, содержащий подсказку пользователю о том, что можно ввести в элемент управления. Текст заполнителя не должен содержать символы возврата каретки или перевода строки. Этот атрибут применяется только тогда, когда значение type атрибут text , search , tel , url ​​ или электронная почта .

Только для чтения

логическое значение : Возвращает/устанавливает атрибут только для чтения элемента, указывающий, что пользователь не может изменить значение элемента управления. Это игнорируется, если тип скрытый , диапазон , цвет , флажок , радио , файл или тип кнопки.

выборКонец

unsigned long : Возвращает/устанавливает конечный индекс выделенного текста. Если выделения нет, возвращается смещение символа сразу после текущей позиции курсора ввода текста.

выборНачало

unsigned long : Возвраты/наборы начальный индекс выделенного текста. Когда ничего не выбрано, возвращается положение курсора ввода текста (каретки) внутри элемента .

выбор направления

строка : Возвращает/устанавливает направление, в котором произошел выбор. Возможные значения: вперед (выбор был выполнен в направлении от начала до конца текущей локали), назад (обратное направление) или нет (направление неизвестно).

размер

unsigned long : Возвращает/устанавливает атрибут размера элемента , содержащий визуальный размер элемента управления. Это значение указывается в пикселях, если только значение типа не равно text или password , в этом случае это целое число символов. Применяется, только когда тип установлен на текст , поиск , тел , URL , электронная почта или пароль .

размытие()

Снимает фокус с элемента ввода; нажатия клавиш впоследствии никуда не денутся.

клик()

Имитирует щелчок по элементу ввода.

фокус()

Фокусируется на элементе ввода; нажатия клавиш впоследствии перейдут к этому элементу.

выбрать()

Выбирает весь текст в элементе ввода и фокусирует его, чтобы пользователь мог впоследствии заменить все его содержимое.

setSelectionRange()

Выбирает диапазон текста в элементе ввода (но не фокусирует его).

setRangeText()

Заменяет диапазон текста в элементе ввода новым текстом.

setCustomValidity()

Задает пользовательское сообщение о допустимости для элемента. Если это сообщение не является пустой строкой, то элемент страдает от пользовательской ошибки проверки и не проходит проверку.

шоуПикер()

Показывает средство выбора даты, времени, цвета и файлов в браузере.

проверитьвалидность()

Возвращает логическое значение, равное 9.0464 false , если элемент является кандидатом на проверку ограничения и не удовлетворяет его ограничениям. В этом случае он также запускает недопустимое событие для элемента. Он возвращает true , если элемент не является кандидатом на проверку ограничения или если он удовлетворяет его ограничениям.

проверка достоверности()

Запускает метод checkValidity() , и если он возвращает false (для недопустимого ввода или отсутствия атрибута шаблона), то он сообщает пользователю, что ввод недействителен, таким же образом, как если бы вы отправили форму.

шаг вниз()

Уменьшает значение на ( шаг * n), где n по умолчанию равно 1, если не указано иное. Выдает исключение InvalidStateError :

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

шаг вверх()

Увеличивает значение на ( шаг * n), где n по умолчанию равно 1, если не указано иное. Выдает исключение InvalidStateError :

• , если метод неприменим для текущего значения типа .,
• , если элемент не имеет значения шага ,
• , если значение нельзя преобразовать в число,
• , если результирующее значение выше max или ниже min .

Прослушайте эти события, используя addEventListener() или назначив прослушиватель событий свойству oneventname этого интерфейса:

input

Срабатывает, когда значение из , или элемент </code> был изменен. Обратите внимание, что это на самом деле запускается в интерфейсе <code> HTMLElement </code>, а также применяется к элементам </code> contenteditable </code>, но мы перечислили его здесь, потому что он чаще всего используется с элементами ввода формы. </p> </dd> <dt> <code> недействительный </code> </dt> <dd> <p> Инициируется, когда элемент не удовлетворяет своим ограничениям во время проверки ограничения. </p> </dd> <dt> <code> поиск </code> <abbr title="Non-standard. Check cross-browser support before using."> Нестандартный </abbr> </dt> <dd> <p> Запускается, когда инициируется поиск <code> <input> </code> из <code> type="search" </code> .<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/1.bp.blogspot.com/-Mhb6AbK38sE/Tn_6F3W4EJI/AAAAAAAAABU/XLn_6M96Hss/w1200-h630-p-k-no-nu/css3%2Bbuttons.png' /><noscript><img loading='lazy' src='/800/600/http/1.bp.blogspot.com/-Mhb6AbK38sE/Tn_6F3W4EJI/AAAAAAAAABU/XLn_6M96Hss/w1200-h630-p-k-no-nu/css3%2Bbuttons.png' /></noscript><div class='yarpp-related yarpp-related-none'> <p>No related posts.</p> </div> </div> </div> <div class="post-sharrre group"> <div id="twitter" data-url="https://ylianova.ru/css/css-input-stilizacziya-tekstovyh-polej-formy-it-shef.html" data-text="Css input: Стилизация текстовых полей формы — ИТ Шеф" data-title="Tweet"></div> <div id="facebook" data-url="https://ylianova.ru/css/css-input-stilizacziya-tekstovyh-polej-formy-it-shef.html" data-text="Css input: Стилизация текстовых полей формы — ИТ Шеф" data-title="Like"></div> <div id="googleplus" data-url="https://ylianova.ru/css/css-input-stilizacziya-tekstovyh-polej-formy-it-shef.html" data-text="Css input: Стилизация текстовых полей формы — ИТ Шеф" data-title="+1"></div> <div id="pinterest" data-url="https://ylianova.ru/css/css-input-stilizacziya-tekstovyh-polej-formy-it-shef.html" data-text="Css input: Стилизация текстовых полей формы — ИТ Шеф" data-title="Pin It"></div> </div> </div> </article> <ul class="post-nav group"> <li class="next"><a href="https://ylianova.ru/raznoe-2/kak-zakryt-dostup-sorry-this-page-cant-be-found.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Как закрыть доступ: Sorry, this page can’t be found.</span></a></li> <li class="previous"><a href="https://ylianova.ru/raznoe-2/ns-zapis-dns-chto-takoe-name-servery-ns-ru-center.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Ns запись dns: Что такое name-серверы (NS) — RU-CENTER</span></a></li> </ul> <section id="comments" class="themeform"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/css/css-input-stilizacziya-tekstovyh-polej-formy-it-shef.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required">

Имя *

Email *

Сайт