Html как написать текст внутри input

«текст внутри поля input«, как сделать «текст внутри поля input«, примеры. Изменить цвет «текста внутри input«. Изменить размер «текста внутри input»

Все о «текста внутри input«

1. Что такое «текст внутри поля input«
2. Как удалить текст внутри input
3. Как изменить цвет текста внутри input

Что такое «текст внутри поля input«

Чтобы узнать, что такое «текст внутри поля input» вам понадобится :


Простой input по умолчанию без ничего:

<input>

Давайте его выведем прямо здесь, как видим внутри input пустота, т.е. никакого текста нет…:

Вставляем текст внутрь input

Для того, чтобы у вас появился «текст внутри input» вам понадобится атрибут «»

Вставляем его внутрь тега input с каким то текстом:

placeholder=»Текст внутри input»

Соберем input :

Код input с текстом внутри:

<input placeholder=»Текст внутри input»>

Пример вывода текста внутри input

Теперь давайте выведем пример кода тега input с текстом внутри:

Как удалить текст внутри input

Конечно же самый простой вариант удаления текста внутри input — это удаление «» со значением.


---

Но…
Представим такую невероятную ситуацию, что у вас нет доступа к input(вопрос — такая система?) мы можем отключить текст внутри? для этого вам понадобится:


Выше я использовал input с текстом внутри.

Добавим ему какой-то класс с произвольным значением:

class=»no_text_into_input»

Наш input получится:

<input class=»no_text_into_input» placeholder=»Текст внутри input»>

Далее… нам потребуются некие стили(opacity), которые отключат текст внутри input

<style>

input::-webkit-input-placeholder {opacity:0;}

input::-moz-placeholder {opacity:0;}

input:-moz-placeholder {opacity:0;}

input:-ms-input-placeholder {opacity:0;}

</style>

Соберем весь код:

Код удаления текста внутри


Html:

<input class="no_text_into_input" placeholder="Текст внутри input">

Css

<style>

input::-webkit-input-placeholder {opacity:0;}

input::-moz-placeholder {opacity:0;}

input:-moz-placeholder {opacity:0;}

input:-ms-input-placeholder {opacity:0;}

</style>

Пример удаления текста внутри

Теперь давайте выведем пример кода тега input с удаленным текстом внутри:

Как видим… наш текст внутри input прекрасно удалился…

Как изменить цвет текста внутри input

Для того, чтобы изменить цвет текста внутри input вам понадобится:

Опять выше уже анонсированный input и заменим ему значение класса на другой:

class=»text_into_input_color»

Далее … нам потребуется стили css? которые изменят цвет внутри input на другой:

<style>

input.text_into_input_color::-webkit-input-placeholder {color:red;}

input.text_into_input_color::-moz-placeholder {color:red;}

input.text_into_input_color:-moz-placeholder {color:red;}

input.text_into_input_color:-ms-input-placeholder {color:red;}

</style>

Соберем весь код:

Код цветного текста внутри input

Соберем весь код покрашенного текста внутри input:


Html

<input class="text_into_input_color" placeholder="Цветной текст внутри input">

Css

<style>

input.text_into_input_color::-webkit-input-placeholder {color:red;}

input.text_into_input_color::-moz-placeholder {color:red;}

input.text_into_input_color:-moz-placeholder {color:red;}

input.text_into_input_color:-ms-input-placeholder {color:red;}

</style>

Вывод кода цветного текста внутри input

Код цветного текста внутри input написали, теперь давайте его выведем прямо здесь:

Можете не благодарить, лучше помогите!

COMMENTS+

 
BBcode

В дизайне часто требуется вставить пояснение к текстовому полю, но не всегда для этого имеется место. Решением в таком случае является добавление подсказывающего текста непосредственно внутрь поля, а при получении фокуса или вводе текста подсказка пропадает. Это делается с помощью атрибута placeholder, значением которого служит любой текст. Подсказка делается для полей text, password, search, email, tel, url и <textarea>, иными словами, везде, где вводится текст.

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

В примере 1 показано добавление подсказки к полям формы для создания авторизации.

Пример 1. Подсказывающий текст
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Подсказка</title>
</head>
<body>
<form>
<p><input name=»login» placeholder=»Логин»></p>
<p><input name=»pass» type=»password» placeholder=»Пароль»></p>
<p><input type=»submit» value=»Вход»></p>
</form>
</body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Вид полей с подсказывающим текстом

Серый цвет, используемый по умолчанию, выбран удачно, но не всегда вписывается в дизайн страницы, особенно если меняется цвет фона полей формы. Для изменения цвета текста выводимого через атрибут placeholder в Firefox применяется псевдоэлемент ::-moz-placeholder.

::-moz-placeholder { color: red; }

В Safari, Opera и Chrome стиль текста меняется следующим образом.

::-webkit-input-placeholder { color: red; }

В IE используется другой подход.

:-ms-input-placeholder { color: red; }

Соединяя воедино эти стили получим страницу, одинаково работающую во всех современных браузерах (пример 2).

Пример 2. Цвет подсказывающего текста

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Подсказка</title>
<style>
input {
background: #86328c; /* Цвет фона */
color: #fffac0; /* Цвет текста */
padding: 5px; /* Поля */
border: transparent; /* Прячем рамку */
width: 200px; /* Ширина поля */
}
::-webkit-input-placeholder {
color: #f9a4bc; /* Chrome, Safari, Opera */
}
::-moz-placeholder {
color: #f9a4bc; /* Firefox */
}
:-ms-input-placeholder {
color: #f9a4bc; /* IE */
}
</style>
</head>
<body>
<form>
<p><input name=»login» placeholder=»Логин»></p>
<p><input name=»pass» type=»password» placeholder=»Пароль»></p>
<p><button type=»submit»>Вход</button>
</form>
</body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Изменение цвета подсказывающего текста

При добавлении полей ввода на страницы сайта для них необходимо указывать вспомогательный текст – подсказки, которые объясняют предназначение полей. Раньше такие подсказки обычно делались просто путем добавления строки текста выше над полем, но можно было встретить самописные решения, которые выполняли роль нового атрибута placeholder.

Как все началось? Часто на практике приходилось для компактности вводить подсказки прямо в полях вводах, а не добавлять лишнюю строку с подсказкой. Но специального атрибута для выполнения этой функции не было – можно было лишь просто добавить текст внутри поля при помощи значения value. Когда пользователь кликнет на поле — при помощи JavaScript происходило удаление текста и если пользователь ничего не оставил в поле, то при удалении фокуса — подсказка возвращалась на свое место опять же при помощи JavaScript. Также необходимо было изменять цвет текста на более светлый при помощи CSS-свойств, чтобы он выглядел как подсказка, а не обычный текст. То есть, данное решение требовало дополнительного написания кода.

Видя такое положение дел, разработчики HTML начали работу над этим – для тега input type=»text» со временем был разработан и добавлен специальный атрибут – placeholder. Он позволяет быстро прописать нужную подсказку для текста, которая будет показана пользователю. Цвет текста в подсказке сразу выделяется серым цветом.

На настоящее время поддержка атрибута placeholder есть во всех современных браузерах. Браузеры, не поддерживающие данный атрибут, просто игнорируют его. Существуют специальные разработки – полифилы, которые при помощи JavaScript реализуют работу атрибута placeholder. Поэтому можно просто писать данный атрибут, а в крайних случаях для остальных браузеров использовать полифилы.

<input type="text" placeholder="Введите текст">

Но как быть с другими типами полей input? Например, type=»checkbox» и type=»radio». Для этих типов полей можно использовать тег label, он задает подсказку для помещаемого в него поля. Например, можно написать так:

<label>
	<span style="display: block;">Отметьте нужное:</span>
	<input type="checkbox">
</label>

Для select нет атрибута placeholder, но можно сделать подсказку внутри поля простым способом – ею будет первый option из этого select. Можно визуально выделить его, например, добавить вначале и в конце дефис.

<select>
	<option value="- Выберите значение -">- Выберите значение -</option>
	<option value="Значение 1"> Значение 1</option>
	<option value=" Значение 2"> Значение 2</option>
	<option value=" Значение 3"> Значение 3</option>
</select>

Остается разобраться с textarea. У тега textarea атрибут placeholder отсутствует, но можно добавить подсказку прямо в поле, просто разместив его между тегами textarea.

<textarea>Введите текст</textarea>

Краткий итог, как сделать подсказки для полей ввода HTML:

• для input type=»text» следует использовать атрибут placeholder;
• для остальных типов input можно использовать тег label;
• для select используется подсказка в виде первого option;
• для textarea подсказка размещается внутри данного тега.

Мы рассмотрели, каким образом можно сделать подсказки для различных полей ввода HTML, даже если они не поддерживают атрибут placeholder.

HTML

<!DOCTYPE html>
<html lang="en, ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>Form__01</title>
</head>
<body>
    <div class="login">
        <div class="login__container">
            <div class="header">
                <span class="autorisation">Авторизация</span>
            </div>
            <div class="form">
                <input class="email" type="email" placeholder="Email">
                <input class="password" type="password" placeholder="Пароль">
                <input class="button" type="button" value="Войти">
            </div>
            <div class="footer">
                <div class="registration__forgot_password">
                    <a href="#registration" id="registration">Регистрация</a>
                    <a href="#forgot_password" id="forgot_password">Забыли пароль?</a>
                </div>
            </div>
</body>
</html>

CSS

*{
    padding: 0;
    margin: 0;
}

.login {
    width: 400px;
    height: 400px;
    background-color: #212121;
    margin: 240px auto;
}

.login__container {
    position: relative;
    width: 340px;
    height: 348px;
    top: 26px;
    left: 30px;
}

.header {
    width: 100%;
    height: 58px;
    background-color: #03A9F4;
    border-radius: 10px 10px 0px 0px;
}

.autorisation {
    position: relative;
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    line-height: 27px;
    font-weight: 500;
    color: #ffffff;
    padding-top: 20px;
    text-align: center;
    bottom: 7px;
}

.autorisation::before {
    content: "";
    display: flex; 
    position: absolute;
    background-image: url(../images/key-icon.png);
    width: 27px;
    height: 27px;
    left: 62px;
}

.form {
    position: relative;
    width: 100%;
    height: 236px;
    background-color: #fafafa;
}

input::placeholder {
    padding-left: 9px;
    color: #bdbdbd
}

.email {
    position: absolute;
    width: 275px;
    height: 45px;
    top: 30px;
    left: 32px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    background: url(../images/email-icon.png) no-repeat left;
    background-position-x: 242px;
}

.email:hover {
    font-size: 17px;
    opacity: 0.7;
    transition: 0.05s;
}

.password {
    position: absolute;
    width: 275px;
    height: 45px;
    top: 95px;
    left: 32px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    background: url(../images/lock-icon.png) no-repeat left;
    background-position-x: 247px;
}

.password:hover {
    font-size: 17px;
    opacity: 0.7;
    transition: 0.05s;
}

.button {
    position: absolute;
    background-color: #f44336;
    width: 275px;
    height: 45px;
    top: 160px;
    left: 32px;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 900;
    color: #ffffff;
    border: none;
}

.button:hover {
    transition: 0.3s;
    background-color: #03A9F4;
}

.footer {
    position: relative;
    width: 100%;
    height: 55px;
    background-color: #eeeeee;
    border-radius: 0px 0px 10px 10px;
}

.registration__forgot_password {
    padding-top: 20px;
    margin-left: 66px;
    position: absolute;
    display: inline-block;
    width: 205px;
    height: 16px;
}

.registration__forgot_password:hover {
    width: 210px;
}

#registration {
    text-decoration: none;
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #212121;
    line-height: 20px;
}

#registration:hover { 
    transition: 0.05s;
    opacity: 0.5;
}

#forgot_password {
    text-decoration: none;
    padding-left: 10px;
    font-family: 'Roboto', sans-serif;  
    display: inline-block;
    font-size: 14px;
    font-weight: 300;
    color: #757575; 
}

#forgot_password:hover {
    transition: 0.05s;
    opacity: 0.5;
}