Html text input очистить

как очистить input js

Как видно из кода, принцип довольно прост и заключается в присвоении пустой строки свойству value этого элемента.

Например, мы хотим очистить поле ввода для поиска музыки. Тогда наш код будет выглядеть так:

 type="text" id="searchInput" placeholder="Введите название песни или исполнителя" />  onclick="clearSearch()">Очистить function clearSearch()  document.getElementById('searchInput').value = ''; >  

При нажатии на кнопку «Очистить» значение поля ввода будет заменено на пустую строку, тем самым произойдет очистка.

Источник

Html text input очистить

Last updated: Jan 12, 2023
Reading time · 3 min

# Table of Contents

# Clear an Input field after Submit

To clear an input field after submitting:

1. Add a click event listener to a button.
2. When the button is clicked, set the input field’s value to an empty string.
3. Setting the field’s value to an empty string resets the input.

Here is the HTML for this example.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> input type="text" id="first_name" name="first_name" /> button id="btn" type="submit">Submitbutton> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const btn = document.getElementById('btn'); btn.addEventListener('click', function handleClick(event)  // 👇️ if you are submitting a form (prevents page reload) event.preventDefault(); const firstNameInput = document.getElementById('first_name'); // Send value to server console.log(firstNameInput.value); // 👇️ clear input field firstNameInput.value = ''; >); 

We added a click event listener to the button.

Every time the button is clicked, the handleClick function is invoked, where we set the value of the input to an empty string.

# Clear multiple input fields after submit

To clear the values for multiple inputs after submitting:

1. Use the querySelectorAll() method to select the collection.
2. Use the forEach() method to iterate over the results.
3. Set the value of each input field to an empty string to reset it.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body> input type="text" id="first_name" name="first_name" /> input type="text" id="last_name" name="last_name" /> button id="btn" type="submit">Submitbutton> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const btn = document.getElementById('btn'); btn.addEventListener('click', function handleClick(event)  // 👇️ if you are submitting a form event.preventDefault(); const inputs = document.querySelectorAll('#first_name, #last_name'); inputs.forEach(input =>  input.value = ''; >); >); 

We used the document.querySelectorAll method to select a NodeList containing the elements with IDs set to first_name and last_name .

The method takes a string that contains one or more valid CSS selectors.

The function we passed to the NodeList.forEach method gets invoked with each input in the NodeList .

In the function, we set the value of each input to an empty string.

# Clear all form fields after submitting

To clear all form fields after submitting:

1. Add a submit event listener on the form element.
2. When the form is submitted, call the reset() method on the form.
3. The reset method restores the values of the input fields to their default state.

Here is the HTML for this example:

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body> form action="" id="my_form"> input type="text" id="first_name" name="first_name" /> input type="text" id="last_name" name="last_name" /> button id="btn" type="submit">Submitbutton> form> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const form = document.getElementById('my_form'); form.addEventListener('submit', function handleSubmit(event)  event.preventDefault(); // 👇️ Send data to the server here // 👇️ Reset the form here form.reset(); >); 

We added a submit event listener to the form element.

The event fires when a form is submitted.

We used the event.preventDefault() method to prevent the page from reloading.

The reset() method restores a form’s elements to their default values.

If you need to show/hide a form on button click, check out the following article.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

How to clear all the input in HTML forms?

Using HTML forms, you can easily take user input. The tag is used to get user input, by adding the form elements. Different types of form elements include text input, radio button input, submit button, etc.

The tag, helps you to take user input using the type attribute. To clear all the input in an HTML form, use the tag with the type attribute as reset.

Example 1

The following example demonstrates how to clear all the input in HTML forms.

In this example, we are going to use the document.getElementId to clear the text in the text field.

DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> meta http-equiv="X-UA-Compatible" content="IE=edge" /> meta name="viewport" content="width=device-width, initial-scale=1.0" /> title>Remove HTMLtitle> head> body>  form> input type="button" value="click here to clear" onclick="document.getElementById('inputText').value = '' "/> input type="text" value="Tutorix" id="inputText" />  form> body> html> 
 

When we click on the clear button the text inside the input(text area) field gets cleared.

Example 2

The following example demonstrates how to clear all the input in HTML forms.

In this example, we are going to use the rest button to clear the text in the text field.

DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> meta http-equiv="X-UA-Compatible" content="IE=edge" /> meta name="viewport" content="width=device-width, initial-scale=1.0" /> title>Clear all the input in HTML formstitle> head> body>  form> input type="text" name="input" /> input type="reset" value="reset" />  form> body> html> 
 

When we click on the clear button the text inside the input(text area) field gets cleared.

Example 3

The following example demonstrates how to clear all the input in HTML forms.

In this example, we are going to use onclick() method to clear the text in the text field.

DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> meta http-equiv="X-UA-Compatible" content="IE=edge" /> meta name="viewport" content="width=device-width, initial-scale=1.0" /> title>Clear all the input in HTML formstitle> head> body>  form> input type="text" value="Tutorix is the best e-learning platform" onclick="this.value=''"/>  form> body> html> 
 

Example 4

You can try to run the following code to clear all the input in HTML forms −

DOCTYPE html> html> body>  form> Student Name:br> input type="text" name="sname"> br> Student Subject:br> input type="text" name="ssubject"> br> input type="reset" value="reset">  form> body> html> 
 

Once the reset button is clicked, the form is cleared.

Источник

Html text input очистить

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

Как сбросить текст в HTML?

Что такое форма сброса?

Метод сброса()Метод сброса()сбрасывает значения всех элементов формы (то же самое,что и нажатие кнопки Сброс).Совет:Для отправки формы используйте метод submit().

Как установить кнопку сброса?

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

.

Как сбросить значение формы?

Метод reset() восстанавливает значения элемента формы по умолчанию. Этот метод делает то же самое, что и щелчок по элементу управления формы. Если элемент управления формы (например, кнопка сброса) имеет имя или идентификатор сброса, он будет маскировать метод сброса формы. Он не сбрасывает другие атрибуты ввода, такие как disabled .

Почему используется сброс типа кнопки?

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

Try it

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

Value

Атрибут value элемента содержит строку, которая используется в качестве метки кнопки. В противном случае такие кнопки, как reset , не имеют значения. value reset

Установка атрибута значения

input type="reset" value="Reset the form">

Опуская атрибут значения

Если вы не укажете value , вы получите кнопку с меткой по умолчанию (обычно «Сброс», но это зависит от пользовательского агента ):

Использование кнопок сброса

Кнопки используются для сброса форм. Если вы хотите создать пользовательскую кнопку, а затем настроить ее поведение с помощью JavaScript, вам необходимо использовать или, что еще лучше, элемент .

Простая кнопка сброса

Начнем с создания простой кнопки сброса:

form> div> label for="example">Type in some sample text label> input id="example" type="text"> div> div> input type="reset" value="Reset the form"> div> form> 

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

Добавление клавиатурной комбинации сброса

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

В этом примере, r указывается в качестве клавиши доступа (необходимо нажать кнопку r плюс конкретные клавиши-модификаторы для комбинации вашего браузера / ОС; см. accesskey для полезного их списка).

form> div> label for="example">Type in some sample text label> input id="example" type="text"> div> div> input type="reset" value="Reset the form" accesskey="r"> div> form> 

Проблема с приведенным выше примером заключается в том, что пользователь не может узнать, что такое ключ доступа! Это особенно верно, поскольку модификаторы обычно нестандартны, чтобы избежать конфликтов. При создании сайта убедитесь, что предоставили эту информацию таким образом, чтобы не мешать дизайну сайта (например, предоставив легкодоступную ссылку, указывающую на информацию о ключах доступа к сайту). Добавление всплывающей подсказки к кнопке (с использованием атрибута title ) также может помочь, хотя это не полное решение для целей доступности.

Отключение и включение кнопки сброса

Чтобы отключить кнопку сброса, укажите на ней глобальный атрибут disabled , например:

input type="reset" value="Disabled" disabled>

Вы можете включать и отключать кнопки во время выполнения, установив для disabled значение true или false ; в JavaScript это выглядит как btn.disabled = true или btn.disabled = false .

Примечание. Дополнительные сведения о включении и отключении кнопок см. На странице .

Validation

Кнопки не участвуют в валидации ограничений;они не имеют реальной ценности,которую можно было бы ограничить.

Examples

Мы включили простые примеры выше.Больше нечего сказать о кнопках сброса.

Specifications

Источник