Как очистить поля формы

Как "очистить форму" от введенных данных. Очистка формы частично. Примеры, код нескольких вариантов очитки формы! И вообще : "как очистить форму на сайте"?

Пошагово очистить форму на сайте.

1. Очистка формы html
2. Очистка формы js
3. Как очистить форму частично?

Очистка формы html

Для того, чтобы продемонстрировать рабочий код "очистки формы" вам понадобится:

Тег form.

Между тегами "form" вставляем тег input.

И собственно, вам понадобится кнопка "input" с типом reset.

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

Код очистки формы от данных html^

Весь тот, код о котором я рассказал ранее вы должны собрать воедино:

<form>

<p>Введите что-нибудь в поля:</p>

<input>

<input>

<input type="reset" value="Очистить форму">

</form>

Пример очистки формы от данных html^

Для того, чтобы проверить как работает "очистка формы" в коде, наберите в полях ввода какую-то информацию и нажмите "очистить форму"!

Введите что-нибудь в поля:

Очистка формы js

Но что делать, когда поля формы, а именно "value" имеет какое-то значение... давайте посмотрим, такую же выше взятую форму, но с заполненными "value" - будет ли очищаться форма!?

Просто нажмите очистить форму...

Как видим "очистка формы" не работает!

Введите что-нибудь в поля:

Давайте заставим форму очищаться!

Для того, чтобы форма очистилась с уже введенными данными в "value", вам понадобится:

Html

Начнем собирать нашу форму с тега form.

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

Кнопку для очищения сделаем вне формы, чтобы очитка не касалась этой кнопки + добавим туда id +, чтобы input стал кнопкой добавим тип "button".

Здесь собирать код html не буду, см общий код ниже...

Javascript

Нам понадобится "javascript код очистки формы", начинаем с тега script.

Напишем функцию((function)) с произвольным названием "clearForm".

Использую сокращенную форму обратиться к тегу по id ко всем полям внутри формы:

var inputs = form . getElementsByTagName('input');

Далее в цикле for "Очищаем все поля" input с value :

for (input of inputs) input.value = '';

Кнопка очищения, мы можем обратиться к тегу по id к "id_button" используя onclick.

Соберем весь код очищения формы с заполненными value.

Теперь всю нашу теорию надо превратить в код "очистки формы":

<form id="form" >

<input value="текст1">

<input value="текст2">

</form>

<input id=id_button type=button value="очистить форму">

Javascript

<script>

function clearForm()

{

var inputs = form . getElementsByTagName('input');

for (input of inputs) input.value = '';

}

id_button.addEventListener('click', clearForm);

</script>

Пример работы кода очищения формы с заполненными value.

И осталось протестировать тот код "очистки формы", что я собрал выше... помещаем его прямо здесь и вам остается только и всего-то нажать кнопку "очистить форму"!

Как очистить форму частично?

Но, что если вам требуется очистить форму только частично? А некоторые поля формы не должны очищаться?

Для того, чтобы собрать код "очистки формы" частично вам понадобится:

Код и теория из предыдущего пункта! Полностью его копируем.Внутрь формы добавляем div опять же с id с произвольным значением "id_div".

Между тегами "div" помещаем все те поля формы, которые должны быть очищены...

А те поля которые не нужно очищать будут находится за пределами этого "div"... всё остальное абсолютно аналогично предыдущему пункту!

Соберем код очистки формы частично:

Html:

<form>

<div id="id_div">

<input value="Здесь очистится">

<input value="Здесь очистится 2">

</div>

<input value="Здесь не очистится">

<input id=id_button2 type=button value="очистить форму">

</form>

Javascript

<script>

function clearForm2()

{

var inputs = id_div.getElementsByTagName('input');

for (input of inputs) input.value = '';

}

id_button2.addEventListener('click', clearForm2);

</script>

Пример работы кода очистки формы частично:

Для того, чтобы проверить работу кода частичной "очистки форм полей" нажмите кнопку "очистить форму"