Получение значения из поля ввода — основа любой формы.
Будь то имя пользователя, номер телефона или комментарий — JavaScript позволяет легко «вытянуть» нужную информацию из поля. Разберём, как это сделать с помощью стандартных методов.
Способ 1. Получение значения через value
htmlКопироватьРедактировать<input type="text" id="username" placeholder="Введите имя">
<button onclick="showValue()">Показать значение</button>
<script>
function showValue() {
const input = document.getElementById("username");
alert("Вы ввели: " + input.value);
}
</script>
Свойство .value возвращает текст, введённый пользователем.
Способ 2. Через querySelector
Можно получить доступ к полю не только по id, но и по class, name или любому CSS-селектору.
javascriptКопироватьРедактироватьconst value = document.querySelector("input[name='email']").value;
Такой способ особенно удобен в динамических формах и при использовании class.
Способ 3. Обработка через addEventListener
Часто значение получают при событии submit или input.
htmlКопироватьРедактировать<form id="myForm">
<input type="text" id="city" placeholder="Город">
<button type="submit">Отправить</button>
</form>
<script>
document.getElementById("myForm").addEventListener("submit", function (e) {
e.preventDefault(); // предотвращаем отправку формы
const city = document.getElementById("city").value;
console.log("Город:", city);
});
</script>
Такой подход подходит для сложных форм и валидации.
Способ 4. Получить значение при вводе (в режиме реального времени)
htmlКопироватьРедактировать<input type="text" id="liveInput">
<script>
document.getElementById("liveInput").addEventListener("input", function () {
console.log("Сейчас в поле:", this.value);
});
</script>
Можно использовать для автоподсказок и live-поиска.
Заключение
Чтобы получить значение из input, используй свойство .value.
Это быстро, просто и работает во всех браузерах. Для разных задач подойдут разные подходы: через getElementById, querySelector, событие submit или input. Всё зависит от того, когда и как ты хочешь использовать данные.