Работа с формами. Работа с текстовыми полями и проверка их содержимого

Формы
Веб-форма представляется уже знакомым для нас элементом html - тегом
, а также типом HTMLFormElement в JS, который наследуется от типа HTMLElement.
Формы имеют некоторые свойства и методы по умолчанию.
Некоторые из них:
name - имя формы (эквивалент HTML-атрибута name);
submit( ) - отправляет данные формы;
reset( ) - сбрасывает все поля формы, восстанавливает значения по умолчанию;

Работа с формами
для того, чтобы получить форму, достаточно воспользоваться методом getElementById.
Помимо этого, все формы на странице хранятся в коллекции document.forms.
Можно получить форму из этой коллекции по индексу, либо имени:
(см. след. слайд)

Отправка данных формы
Данные формы отправляются к серверу, когда пользователь щёлкает на кнопке отправки либо на графической кнопке. Роль кнопки отправки играет
, у которого атрибут type имеет значение submit (по умолчанию), а так же тег input, атрибут type которого может иметь значения submit либо image.
Пример :

Отправка и отмена отправки
Когда данные с формы отправляются, перед отправкой в браузере генерируется событие submit. В его обработчике можно проверить введенные в форме данные, и при необходимости заблокировать их отправку, отменив для события действие, предлагаемое по умолчанию.
Помимо этого, в любой момент можно отправить данные с формы программно, для этого не требуется даже наличия самой кнопки отправки. Достаточно лишь самой формы и обработчика:

Проблема
При такой отправке данных формы событие submit не генерируется, поэтому проверять введенные данные лучше заранее.
Одна из главных проблем при работе с формами - многократная отправка. Иногда пользователи от нетерпения кликают много раз по кнопке “отправить”, что приводит к перегрузке сервера и другим проблемам.
Решения всего два - отключение кнопки отправки после того, как данные отправлены , и отмена последующих попыток отправки данных в обработчике submit.

Пользовательский сброс формы
Сбросить форму можно, нажав на кнопку сброса - элемент
/
, у которого атрибут type имеет значение reset.

Программный сброс формы
Также сбросить форму можно программно, при помощи метода reset(), который в отличие от метода submit(), генерирует соответствующее событие.

Поля форм
Как и другие элементы страницы, элементы форм доступны с помощью встроенных DOM-методов. Помимо этого, все элементы любой формы содержатся в ее коллекции elements - упорядоченном списке ссылок на все поля формы и все элементы
,
, <select>, <fieldset>.<br>Поля формы хранятся в коллекции elements в том же порядке, что и в разметке, и индексируются по позиции либо по имени:<br>(см.след.слайд) ======><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide11" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/933674/slide-10.jpg" target="_blank" rel="noopener">Слайд 11</a><h3 class="slides-content text-center font-bold"><div><p> <br><p> <br></div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/933674/slide-10.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/933674/slide-10.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/933674/slide-10.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-10.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-10.jpg" class="slides-image"><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide12" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/933674/slide-11.jpg" target="_blank" rel="noopener">Слайд 12</a><h3 class="slides-content text-center font-bold"><div><p>Несколько name<br><p>Если одно имя идентифицирует несколько элементов формы, то все элементы возвращаются</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Несколько name Если одно имя идентифицирует несколько элементов формы, то все элементы возвращаются в коллекции HTMLCollection:" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/933674/slide-11.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/933674/slide-11.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/933674/slide-11.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-11.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-11.jpg" class="slides-image"><!----><div class="slides-content">в коллекции HTMLCollection:<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide13" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/933674/slide-12.jpg" target="_blank" rel="noopener">Слайд 13</a><h3 class="slides-content text-center font-bold"><div><p>Общие свойства полей форм<br><p>Практически все поля форм имеют несколько общих свойств. Так</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Общие свойства полей форм Практически все поля форм имеют несколько общих свойств." loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/933674/slide-12.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/933674/slide-12.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/933674/slide-12.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-12.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-12.jpg" class="slides-image"><!----><div class="slides-content">как многие поля представляют собой тип <input>, одни свойства используются только с полями определенного типа, другие же доступны для всех типов полей.<br>Некоторые из них:<br>disabled - логическое значение, указывающее, отключено ли поле<br>name - имя поля<br>readOnly - логическое значение, указывающее, доступно ли поле только для чтения<br>tabIndex - порядок перехода по нажатию клавиши табуляции<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide14" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/933674/slide-13.jpg" target="_blank" rel="noopener">Слайд 14</a><h3 class="slides-content text-center font-bold"><div><p> <br><p>type - тип поля (checkbox/radio …)<br>value - значение поля, отправляемое серверу.<br>form</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="type - тип поля (checkbox/radio …) value - значение поля, отправляемое серверу." loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/933674/slide-13.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/933674/slide-13.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/933674/slide-13.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-13.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-13.jpg" class="slides-image"><!----><div class="slides-content">- указатель на форму, к которой относится поле<br>Все свойства, кроме form, можно изменять динамически. Например:<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide15" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/933674/slide-14.jpg" target="_blank" rel="noopener">Слайд 15</a><h3 class="slides-content text-center font-bold"><div><p>Отключение формы<br><p>Возможность динамически изменять свойства полей форм позволяет в любой момент модифицировать</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Отключение формы Возможность динамически изменять свойства полей форм позволяет в любой момент" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/933674/slide-14.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/933674/slide-14.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/933674/slide-14.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-14.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-14.jpg" class="slides-image"><!----><div class="slides-content">форму самыми разными способами. Например, иногда пользователь кликает слишком много раз по кнопке отправки. Это может привести к выставлению нескольких счетов в приложениях электронной коммерции.<br>В связи с этим полезно отключать работу кнопки отправки после первого клика по ней, или, другими словами, при генерировании события submit.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide16" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/933674/slide-15.jpg" target="_blank" rel="noopener">Слайд 16</a><h3 class="slides-content text-center font-bold"><div><p>Отключение кнопки отправки<br><p>*естественно, данный код помещается в обработчик события submit<br></div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Отключение кнопки отправки *естественно, данный код помещается в обработчик события submit" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/933674/slide-15.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/933674/slide-15.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/933674/slide-15.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-15.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-15.jpg" class="slides-image"><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide17" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/933674/slide-16.jpg" target="_blank" rel="noopener">Слайд 17</a><h3 class="slides-content text-center font-bold"><div><p>Свойство type<br><p>Оно есть практически у всех полей формы, у элементов input оно</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Свойство type Оно есть практически у всех полей формы, у элементов input" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/933674/slide-16.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/933674/slide-16.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/933674/slide-16.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-16.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-16.jpg" class="slides-image"><!----><div class="slides-content">имеет то же значение, что содержание атрибута type в соответствующем теге.<br>У элементов input и button свойство type можно изменять динамически, у элемента select оно доступно только для чтения, изменять его нельзя.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide18" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/933674/slide-17.jpg" target="_blank" rel="noopener">Слайд 18</a><h3 class="slides-content text-center font-bold"><div><p>Некоторые свойства полей:<br><p> <br></div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Некоторые свойства полей:" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/933674/slide-17.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/933674/slide-17.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/933674/slide-17.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-17.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-17.jpg" class="slides-image"><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide19" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/933674/slide-18.jpg" target="_blank" rel="noopener">Слайд 19</a><h3 class="slides-content text-center font-bold"><div><p>Задание 1<br><p>Создать форму в HTML с 2 полями ввода и кнопкой отправки.</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Задание 1 Создать форму в HTML с 2 полями ввода и кнопкой" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/933674/slide-18.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/933674/slide-18.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/933674/slide-18.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-18.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-18.jpg" class="slides-image"><!----><div class="slides-content">Получить эту форму на событие отправки этой формы (т е нажатие кнопки), сделать кнопку неактивной и очистить форму<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide20" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/933674/slide-19.jpg" target="_blank" rel="noopener">Слайд 20</a><h3 class="slides-content text-center font-bold"><div><p>Задание 2<br><p>Создать форму в HTML с полем ввода и кнопкой отправки, на</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Задание 2 Создать форму в HTML с полем ввода и кнопкой отправки," loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/933674/slide-19.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/933674/slide-19.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/933674/slide-19.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-19.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-19.jpg" class="slides-image"><!----><div class="slides-content">submit формы менять значение поля ввода на произвольное<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide21" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/933674/slide-20.jpg" target="_blank" rel="noopener">Слайд 21</a><h3 class="slides-content text-center font-bold"><div><p>Задание 3<br><p>Создать форму в HTML с полем ввода, несколькими checkbox и кнопкой</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Задание 3 Создать форму в HTML с полем ввода, несколькими checkbox и" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/933674/slide-20.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/933674/slide-20.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/933674/slide-20.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-20.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-20.jpg" class="slides-image"><!----><div class="slides-content">отправки. На submit формы вывести значения поля ввода и имена всех отмеченных полей checkbox.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide22" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/933674/slide-21.jpg" target="_blank" rel="noopener">Слайд 22</a><h3 class="slides-content text-center font-bold"><div><p>Общие методы полей форм<br><p>У каждого поля формы есть метод focus() и blur</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Общие методы полей форм У каждого поля формы есть метод focus() и" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/933674/slide-21.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/933674/slide-21.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/933674/slide-21.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-21.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-21.jpg" class="slides-image"><!----><div class="slides-content">();<br>Первый назначает фокус полю формы, то есть делает его активным, после чего оно начинает реагировать на события клавиатуры. <br>Например, в текстовом поле, получившем фокус, появляется курсор, показывающий, что оно готово принимать ввод.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide23" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/933674/slide-22.jpg" target="_blank" rel="noopener">Слайд 23</a><h3 class="slides-content text-center font-bold"><div><p>При загрузке<br><p>при перезагрузке либо загрузке обычно фокус задают первому полю формы:<br>*при выполнении</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="При загрузке при перезагрузке либо загрузке обычно фокус задают первому полю формы:" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/933674/slide-22.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/933674/slide-22.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/933674/slide-22.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-22.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-22.jpg" class="slides-image"><!----><div class="slides-content">кода возникнет ошибка, если первое поле формы это input с атрибутом hidden, либо если оно скрыто при помощи css-свойств.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide24" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/933674/slide-23.jpg" target="_blank" rel="noopener">Слайд 24</a><h3 class="slides-content text-center font-bold"><div><p>Метод blur()<br><p>Этот метод отменяет полю фокус и не назначает его никакому другому</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Метод blur() Этот метод отменяет полю фокус и не назначает его никакому" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/933674/slide-23.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/933674/slide-23.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/933674/slide-23.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-23.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-23.jpg" class="slides-image"><!----><div class="slides-content">полю. Раньше он часто использовался, когда не было атрибута readonly, на данный момент практически не используется.<br>*Когда к тегу <input> добавляется атрибут readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью js.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide25" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/933674/slide-24.jpg" target="_blank" rel="noopener">Слайд 25</a><h3 class="slides-content text-center font-bold"><div><p>Общие события полей форм<br><p>Все поля форм поддерживают три события:<br>blur - генерируется при</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Общие события полей форм Все поля форм поддерживают три события: blur -" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/933674/slide-24.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/933674/slide-24.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/933674/slide-24.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-24.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-24.jpg" class="slides-image"><!----><div class="slides-content">утрате фокуса полем<br>change - генерируется для элементов input и textarea при утрате фокуса, если свойство value было изменено, а также для элементов select при выборе другого элемента из списка<br>focus - генерируется при получении фокуса полем<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide26" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/933674/slide-25.jpg" target="_blank" rel="noopener">Слайд 26</a><h3 class="slides-content text-center font-bold"><div><p>Работа с текстовыми полями<br><p>Содержимое текстовых полей тегов input и textarea хранится в</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Работа с текстовыми полями Содержимое текстовых полей тегов input и textarea хранится" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/933674/slide-25.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/933674/slide-25.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/933674/slide-25.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-25.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-25.jpg" class="slides-image"><!----><div class="slides-content">свойстве value, которое можно использовать для чтения и задания значения текстового поля, например:<br>alert(‘form.value’);<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide27" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/933674/slide-26.jpg" target="_blank" rel="noopener">Слайд 27</a><h3 class="slides-content text-center font-bold"><div><p>Метод substring<br><p>Метод substring возвращает подстроку, начиная с позиции indexA до, но не</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Метод substring Метод substring возвращает подстроку, начиная с позиции indexA до, но не включая indexB." loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/933674/slide-26.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/933674/slide-26.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/933674/slide-26.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-26.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-26.jpg" class="slides-image"><!----><div class="slides-content">включая indexB.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide28" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/933674/slide-27.jpg" target="_blank" rel="noopener">Слайд 28</a><h3 class="slides-content text-center font-bold"><div><p>Частичное выделение текста<br><p>В HTML5 разрешается выделять фрагменты текстовых полей. Для этого используется</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Частичное выделение текста В HTML5 разрешается выделять фрагменты текстовых полей. Для этого" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/933674/slide-27.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/933674/slide-27.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/933674/slide-27.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-27.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-27.jpg" class="slides-image"><!----><div class="slides-content">метод setSelectionRange(). Он принимает два аргумента: индекс первого выделяемого символа, и индекс конца выделения<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide29" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/933674/slide-28.jpg" target="_blank" rel="noopener">Слайд 29</a><h3 class="slides-content text-center font-bold"><div><p> <br>У каждого поля можно назначить максимальное количество вводимых символов:<br></div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="У каждого поля можно назначить максимальное количество вводимых символов:" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/933674/slide-28.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/933674/slide-28.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/933674/slide-28.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-28.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-28.jpg" class="slides-image"><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide30" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/933674/slide-29.jpg" target="_blank" rel="noopener">Слайд 30</a><h3 class="slides-content text-center font-bold"><div><p>Задание 4<br><p>Создать форму в HTML с полем ввода и кнопкой отправки. На</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Задание 4 Создать форму в HTML с полем ввода и кнопкой отправки." loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/933674/slide-29.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/933674/slide-29.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/933674/slide-29.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-29.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/933674/slide-29.jpg" class="slides-image"><!----><div class="slides-content">submit формы, если поля ввода пустое, делать фокус на поле ввода.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><!----></div><!--]--></div><div class="section"><div></div></div><form id="download" action="/api/" method="post" class="download"><!----><div class="download-description"> Имя файла: Работа-с-формами.-Работа-с-текстовыми-полями-и-проверка-их-содержимого.pptx <br> Количество просмотров: 62 <br> Количество скачиваний: 0</div><button class="download-btn" type="submit">Скачать</button><!----></form><div class="navigation"><div class="navigation-item"><div>- Предыдущая</div><a href="/prezentacii-na-razlichnye-temy/ao-ab-rossiya" class="navigation-link">АО АБ Россия</a></div><div class="navigation-item"><div>Следующая -</div><a href="/prezentacii-na-razlichnye-temy/proekt-byudzheta-dvizheniya-denezhnyh-sredstv-na" class="navigation-link">Проект бюджета движения денежных средств на 2021 г</a></div></div></div></div><div class="item-layoutRelated"><div class="section"><div></div></div></div></div><div class="item-layout"><div class="related"><h2 class="related-header">Похожие презентации</h2><div class="related-wrapper"><!--[--><div class="related-item"><a href="/prezentacii-po-informatike/nadezhnost-programmnyh-produktov" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1061775/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1061775/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1061775/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1061775/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1061775/slide-0.jpg" class="slides-image related-itemImage"> Надежность программных продуктов</a></div><div class="related-item"><a href="/prezentacii-po-informatike/harakteristika-proizvodstvennoy-sistemy-tema-n4" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1045055/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1045055/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1045055/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1045055/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1045055/slide-0.jpg" class="slides-image related-itemImage"> Характеристика производственной системы. Тема №4</a></div><div class="related-item"><a href="/prezentacii-po-informatike/tsikly-po-peremennoy-programmirovanie-na-yazyke" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1077030/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1077030/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1077030/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1077030/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1077030/slide-0.jpg" class="slides-image related-itemImage"> Циклы по переменной. Программирование на языке Python</a></div><div class="related-item"><a href="/prezentacii-po-informatike/osnovnaya-stranitsa-sayta-sistemy" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/862676/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/862676/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/862676/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/862676/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/862676/slide-0.jpg" class="slides-image related-itemImage"> Основная страница сайта (системы)</a></div><div class="related-item"><a href="/prezentacii-po-informatike/planirovanie-i-realizatsiya-veb-sayta-sluzhby" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1076939/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1076939/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1076939/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1076939/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1076939/slide-0.jpg" class="slides-image related-itemImage"> Планирование и реализация веб-сайта службы социальной помощи</a></div><div class="related-item"><a href="/prezentacii-po-informatike/moya-informatsionnaya-kultura" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1079535/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1079535/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1079535/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1079535/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1079535/slide-0.jpg" class="slides-image related-itemImage"> Моя информационная культура</a></div><div class="related-item"><a href="/prezentacii-po-informatike/ponyatie-modeli-graficheskie-informatsionnye-modeli-8" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1022846/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1022846/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1022846/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1022846/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1022846/slide-0.jpg" class="slides-image related-itemImage"> Понятие модели. Графические информационные модели. 8 класс</a></div><div class="related-item"><a href="/prezentacii-po-informatike/reshenie-zadach-s-odnomernym-massivom-1" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/935086/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/935086/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/935086/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/935086/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/935086/slide-0.jpg" class="slides-image related-itemImage"> Решение задач с одномерным массивом</a></div><div class="related-item"><a href="/prezentacii-po-informatike/tehnologiya-raboty-s-informatsionnymi-istochnikami-2" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/916461/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/916461/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/916461/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/916461/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/916461/slide-0.jpg" class="slides-image related-itemImage"> Технология работы с информационными источниками</a></div><div class="related-item"><a href="/prezentacii-po-informatike/razvlecheniya-i-bezopasnost-v-seti-internet" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1103199/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1103199/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1103199/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1103199/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1103199/slide-0.jpg" class="slides-image related-itemImage"> Развлечения и безопасность в сети Интернет</a></div><div class="related-item"><a href="/prezentacii-po-informatike/instruktsiya-po-formirovaniyu-elektronnyh-dokumentov-po" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1092448/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1092448/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1092448/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1092448/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1092448/slide-0.jpg" class="slides-image related-itemImage"> Инструкция по формированию электронных документов по информационному взаимодействию</a></div><div class="related-item"><a href="/prezentacii-po-informatike/razrabotka-sistemy-priema-zayavok-na-provedenie-1" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1065764/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1065764/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1065764/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1065764/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1065764/slide-0.jpg" class="slides-image related-itemImage"> Разработка системы приема заявок на проведение работ по ремонту компьютерного оборудования для организации</a></div><div class="related-item"><a href="/prezentacii-po-informatike/osnovy-zhurnalistiki-kontrolnaya-rabota" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/936376/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/936376/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/936376/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/936376/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/936376/slide-0.jpg" class="slides-image related-itemImage"> Основы журналистики. Контрольная работа</a></div><div class="related-item"><a href="/prezentacii-po-informatike/pascal-abc-rabota-s-chislovymi-dannymi-1" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1159747/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1159747/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1159747/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1159747/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1159747/slide-0.jpg" class="slides-image related-itemImage"> Pascal ABC. Работа с числовыми данными. Целые числа. Целочисленные переменные. Урок 5-6</a></div><div class="related-item"><a href="/prezentacii-po-informatike/direktivy-region-i-endregion-c-55-2" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1156254/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1156254/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1156254/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1156254/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1156254/slide-0.jpg" class="slides-image related-itemImage"> Директивы #region и #endregion (C#)</a></div><div class="related-item"><a href="/prezentacii-po-informatike/avtomatizirovannaya-generatsiya-testov-s-pomoshchyu-programmnogo" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1089368/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1089368/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1089368/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1089368/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1089368/slide-0.jpg" class="slides-image related-itemImage"> Автоматизированная генерация тестов с помощью программного обеспечения</a></div><div class="related-item"><a href="/prezentacii-po-informatike/dopolnitelnye-ustrojstva-1" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/482907/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/482907/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/482907/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/482907/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/482907/slide-0.jpg" class="slides-image related-itemImage"> «ДОПОЛНИТЕЛЬНЫЕ УСТРОЙСТВА»</a></div><div class="related-item"><a href="/prezentacii-po-informatike/yazyk-uml-diagrammy-komponentov" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1082266/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1082266/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1082266/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1082266/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1082266/slide-0.jpg" class="slides-image related-itemImage"> Язык UML. Диаграммы компонентов</a></div><div class="related-item"><a href="/prezentacii-po-informatike/primer-stories-dlya-pokaza-novinok-serialov" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1093798/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1093798/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1093798/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1093798/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1093798/slide-0.jpg" class="slides-image related-itemImage"> Пример Stories для показа новинок сериалов выходящих в сервисе Амедиатека</a></div><div class="related-item"><a href="/prezentacii-po-informatike/ustroystva-personalnogo-kompyutera-2" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1019638/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1019638/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1019638/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1019638/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1019638/slide-0.jpg" class="slides-image related-itemImage"> Устройства персонального компьютера</a></div><div class="related-item"><a href="/prezentacii-po-informatike/tehnologii-ispolzuemye-pri-proektirovanii-virtualnoy-vystavki" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1114849/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1114849/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1114849/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1114849/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1114849/slide-0.jpg" class="slides-image related-itemImage"> Технологии, используемые при проектировании виртуальной выставки</a></div><div class="related-item"><a href="/prezentacii-po-informatike/perspektivy-razvitiya-internet-tehnologiy" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1099249/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1099249/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1099249/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1099249/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1099249/slide-0.jpg" class="slides-image related-itemImage"> Перспективы развития интернет-технологий</a></div><div class="related-item"><a href="/prezentacii-po-informatike/ispolnitel-robot-v-srede-programmirovaniya-2" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/960256/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/960256/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/960256/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/960256/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/960256/slide-0.jpg" class="slides-image related-itemImage"> Исполнитель робот в среде программирования</a></div><div class="related-item"><a href="/prezentacii-po-informatike/sayt-dlya-poiska-prepodavateley" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/925859/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/925859/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/925859/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/925859/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/925859/slide-0.jpg" class="slides-image related-itemImage"> Сайт для поиска преподавателей</a></div><div class="related-item"><a href="/prezentacii-po-informatike/proverka-i-otsenka-navykov-raboty-s" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/969814/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/969814/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/969814/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/969814/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/969814/slide-0.jpg" class="slides-image related-itemImage"> Проверка и оценка навыков работы с текстовым процессором MS Word</a></div><div class="related-item"><a href="/prezentacii-po-informatike/argus-wfm-konvergent" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/936722/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/936722/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/936722/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/936722/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/936722/slide-0.jpg" class="slides-image related-itemImage"> Аргус WFM Конвергент</a></div><div class="related-item"><a href="/prezentacii-po-informatike/informatika-vvedenie-v-spetsialnost" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/977015/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/977015/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/977015/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/977015/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/977015/slide-0.jpg" class="slides-image related-itemImage"> Информатика. Введение в специальность</a></div><div class="related-item"><a href="/prezentacii-po-informatike/report-of-the-advertising-campaign" class="related-itemLink"><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1113605/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1113605/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1113605/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1113605/slide-0.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1113605/slide-0.jpg" class="slides-image related-itemImage"> Report of the Advertising campaign</a></div><!--]--></div></div></div></div><!--]--><!--]--><!--]--></div></div></main><footer class="footer"><div class="layout"><div class="footer-text"><!--LiveInternet counter--><a href="https://www.liveinternet.ru/click"
target="_blank"><img id="licnt7D89" width="88" height="31" style="border:0"
title="LiveInternet: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAIBTAA7"
alt="LiveInternet"/></a><script>(function(d,s){d.getElementById("licnt7D89").src=
"https://counter.yadro.ru/hit?t12.1;r"+escape(d.referrer)+
((typeof(s)=="undefined")?"":";s"+s.width+"*"+s.height+"*"+
(s.colorDepth?s.colorDepth:s.pixelDepth))+";u"+escape(d.URL)+
";h"+escape(d.title.substring(0,150))+";"+Math.random()})
(document,screen)</script><!--/LiveInternet--></div><div class="footer-contacts"><svg class="footer-contactsIcon" viewBox="0 0 27 26" xmlns="http://www.w3.org/2000/svg"><use xlink:href="/images/icons.svg#contacts"></use></svg> Обратная связь</div><div class="footer-text"><a href="/page/pravoobladateliam">Для правообладателей</a></div><div class="footer-contactsEmail"> Email: <span class="footer-contactsShow">Нажмите что бы посмотреть</span></div></div></footer></div><!--]--></div><script>window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T){return {data:{meta:{result:{meta:{h1:l,main_text:b,main_title:m,main_description:n,main_keywords:o,main_image:b},app:{logo_image:p,logo_image_width:i,logo_image_height:q,logo_text:r,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:e,banner_1:b,banner_2:b,banner_3:b,banner_4:b,banner_5:b,banner_6:b,banner_7:b,banner_8:b,banner_9:b,banner_10:b,email:w,footer_before:x,footer:y,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:z,item_images:A,item_images_tag:B,item_words_h3:c,item_words_tag:C,item_words_1:h,routing:D,item_slide_skipping:E,item_download_timeout:F,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:j,header_bg:k,accent:G}},social:H}},item:{result:{id:933674,name:"Работа с формами. Работа с текстовыми полями и проверка их содержимого",category:I,count:31,jpg:"jpg\u002F933674",hits:62,download:a,h1:J,meta:{h1:J,title:"Работа с формами. Работа с текстовыми полями и проверка их содержимого презентация",description:"Работа с формами. Работа с текстовыми полями и проверка их содержимого презентация, доклад, проект, Информатика ",keywords:"Работа с формами. Работа с текстовыми полями и проверка их содержимого, презентация, доклад, проект, скачать презентацию на тему, PowerPoint, скачати презентацію, фон, шаблон, урок, конспект, класс, школа, класс, Информатика",download_link:b},text:"\u003Cp style=\"text-align: justify;\" \u002F\u003EПрезентация на тему Работа с формами. Работа с текстовыми полями и проверка их содержимого, из раздела: Информатика. Презентацию в формате PowerPoint (pptx) можно скачать внизу страницы, поделившись ссылкой в социальных сетях! Презентации взяты из открытого доступа или загружены их авторами, администрация сайта не отвечает за достоверность информации в них. Все права принадлежат авторам материалов: \u003Ca href=\"politika-zashchity-avtorskih-prav\"\u003EПолитика защиты авторских прав\u003C\u002Fa\u003E",seo_text:"\u003Cp\u003EФормы\u003Cbr\u003E\u003Cp\u003EВеб-форма представляется уже знакомым для нас элементом html - тегом \u003Cform\u003E, а также типом HTMLFormElement в JS, который наследуется от типа HTMLElement.\u003Cbr\u003EФормы имеют некоторые свойства и методы по умолчанию.\u003Cbr\u003EНекоторые из них:\u003Cbr\u003Ename - имя формы (эквивалент HTML-атрибута name);\u003Cbr\u003Esubmit( ) - отправляет данные формы;\u003Cbr\u003Ereset( ) - сбрасывает все поля формы, восстанавливает значения по умолчанию;\u003Cbr\u003E \u003Cp\u003EРабота с формами\u003Cbr\u003E\u003Cp\u003Eдля того, чтобы получить форму, достаточно воспользоваться методом getElementById.\u003Cbr\u003EПомимо этого, все формы на странице хранятся в коллекции document.forms.\u003Cbr\u003EМожно получить форму из этой коллекции по индексу, либо имени:\u003Cbr\u003E\u003Cbr\u003E(см. след. слайд)\u003Cbr\u003E\u003Cbr\u003E",file:"Работа-с-формами.-Работа-с-текстовыми-полями-и-проверка-их-содержимого.pptx",texts:["\u003Cp\u003EРабота с формами\t\u003Cbr\u003E\u003Cp\u003Eработа с текстовыми полями и проверка их содержимого\u003Cbr\u003E","\u003Cp\u003EФормы\u003Cbr\u003E\u003Cp\u003EВеб-форма представляется уже знакомым для нас элементом html - тегом \u003Cform\u003E, а также типом HTMLFormElement в JS, который наследуется от типа HTMLElement.\u003Cbr\u003EФормы имеют некоторые свойства и методы по умолчанию.\u003Cbr\u003EНекоторые из них:\u003Cbr\u003Ename - имя формы (эквивалент HTML-атрибута name);\u003Cbr\u003Esubmit( ) - отправляет данные формы;\u003Cbr\u003Ereset( ) - сбрасывает все поля формы, восстанавливает значения по умолчанию;\u003Cbr\u003E","\u003Cp\u003EРабота с формами\u003Cbr\u003E\u003Cp\u003Eдля того, чтобы получить форму, достаточно воспользоваться методом getElementById.\u003Cbr\u003EПомимо этого, все формы на странице хранятся в коллекции document.forms.\u003Cbr\u003EМожно получить форму из этой коллекции по индексу, либо имени:\u003Cbr\u003E(см. след. слайд)\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E","\u003Cp\u003EОтправка данных формы\u003Cbr\u003E\u003Cp\u003EДанные формы отправляются к серверу, когда пользователь щёлкает на кнопке отправки либо на графической кнопке. Роль кнопки отправки играет \u003Cbutton\u003E , у которого атрибут type имеет значение submit (по умолчанию), а так же тег input, атрибут type которого может иметь значения submit либо image.\u003Cbr\u003EПример :\u003Cbr\u003E","\u003Cp\u003EОтправка и отмена отправки\u003Cbr\u003E\u003Cp\u003EКогда данные с формы отправляются, перед отправкой в браузере генерируется событие submit. В его обработчике можно проверить введенные в форме данные, и при необходимости заблокировать их отправку, отменив для события действие, предлагаемое по умолчанию.\u003Cbr\u003EПомимо этого, в любой момент можно отправить данные с формы программно, для этого не требуется даже наличия самой кнопки отправки. Достаточно лишь самой формы и обработчика:\u003Cbr\u003E","\u003Cp\u003EПроблема\u003Cbr\u003E\u003Cp\u003EПри такой отправке данных формы событие submit не генерируется, поэтому проверять введенные данные лучше заранее.\u003Cbr\u003EОдна из главных проблем при работе с формами - многократная отправка. Иногда пользователи от нетерпения кликают много раз по кнопке “отправить”, что приводит к перегрузке сервера и другим проблемам.\u003Cbr\u003EРешения всего два - отключение кнопки отправки после того, как данные отправлены , и отмена последующих попыток отправки данных в обработчике submit.\u003Cbr\u003E","\u003Cp\u003EПользовательский сброс формы \u003Cbr\u003E\u003Cp\u003EСбросить форму можно, нажав на кнопку сброса - элемент \u003Cinput\u003E\u002F\u003Cbutton\u003E, у которого атрибут type имеет значение reset.\u003Cbr\u003E","\u003Cp\u003EПрограммный сброс формы\u003Cbr\u003E\u003Cp\u003EТакже сбросить форму можно программно, при помощи метода reset(), который в отличие от метода submit(), генерирует соответствующее событие.\u003Cbr\u003E","\u003Cp\u003EПоля форм \u003Cbr\u003E\u003Cp\u003EКак и другие элементы страницы, элементы форм доступны с помощью встроенных DOM-методов. Помимо этого, все элементы любой формы содержатся в ее коллекции elements - упорядоченном списке ссылок на все поля формы и все элементы \u003Cinput\u003E, \u003Ctextarea\u003E, \u003Cselect\u003E, \u003Cfieldset\u003E.\u003Cbr\u003EПоля формы хранятся в коллекции elements в том же порядке, что и в разметке, и индексируются по позиции либо по имени:\u003Cbr\u003E(см.след.слайд) ======\u003E\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E","\u003Cp\u003EНесколько name\u003Cbr\u003E\u003Cp\u003EЕсли одно имя идентифицирует несколько элементов формы, то все элементы возвращаются в коллекции HTMLCollection:\u003Cbr\u003E","\u003Cp\u003EОбщие свойства полей форм\u003Cbr\u003E\u003Cp\u003EПрактически все поля форм имеют несколько общих свойств. Так как многие поля представляют собой тип \u003Cinput\u003E, одни свойства используются только с полями определенного типа, другие же доступны для всех типов полей.\u003Cbr\u003EНекоторые из них:\u003Cbr\u003Edisabled - логическое значение, указывающее, отключено ли поле\u003Cbr\u003Ename - имя поля\u003Cbr\u003EreadOnly - логическое значение, указывающее, доступно ли поле только для чтения\u003Cbr\u003EtabIndex - порядок перехода по нажатию клавиши табуляции\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003E\u003Cp\u003Etype - тип поля (checkbox\u002Fradio …)\u003Cbr\u003Evalue - значение поля, отправляемое серверу.\u003Cbr\u003Eform - указатель на форму, к которой относится поле\u003Cbr\u003EВсе свойства, кроме form, можно изменять динамически. Например:\u003Cbr\u003E","\u003Cp\u003EОтключение формы\u003Cbr\u003E\u003Cp\u003EВозможность динамически изменять свойства полей форм позволяет в любой момент модифицировать форму самыми разными способами. Например, иногда пользователь кликает слишком много раз по кнопке отправки. Это может привести к выставлению нескольких счетов в приложениях электронной коммерции.\u003Cbr\u003EВ связи с этим полезно отключать работу кнопки отправки после первого клика по ней, или, другими словами, при генерировании события submit.\u003Cbr\u003E","\u003Cp\u003EОтключение кнопки отправки\u003Cbr\u003E\u003Cp\u003E*естественно, данный код помещается в обработчик события submit\u003Cbr\u003E","\u003Cp\u003EСвойство type\u003Cbr\u003E\u003Cp\u003EОно есть практически у всех полей формы, у элементов input оно имеет то же значение, что содержание атрибута type в соответствующем теге.\u003Cbr\u003EУ элементов input и button свойство type можно изменять динамически, у элемента select оно доступно только для чтения, изменять его нельзя.\u003Cbr\u003E","\u003Cp\u003EНекоторые свойства полей:\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E","\u003Cp\u003EЗадание 1\u003Cbr\u003E\u003Cp\u003EСоздать форму в HTML с 2 полями ввода и кнопкой отправки. Получить эту форму на событие отправки этой формы (т е нажатие кнопки), сделать кнопку неактивной и очистить форму\u003Cbr\u003E","\u003Cp\u003EЗадание 2\u003Cbr\u003E\u003Cp\u003EСоздать форму в HTML с полем ввода и кнопкой отправки, на submit формы менять значение поля ввода на произвольное\u003Cbr\u003E","\u003Cp\u003EЗадание 3\u003Cbr\u003E\u003Cp\u003EСоздать форму в HTML с полем ввода, несколькими checkbox и кнопкой отправки. На submit формы вывести значения поля ввода и имена всех отмеченных полей checkbox.\u003Cbr\u003E","\u003Cp\u003EОбщие методы полей форм\u003Cbr\u003E\u003Cp\u003EУ каждого поля формы есть метод focus() и blur ();\u003Cbr\u003EПервый назначает фокус полю формы, то есть делает его активным, после чего оно начинает реагировать на события клавиатуры. \u003Cbr\u003EНапример, в текстовом поле, получившем фокус, появляется курсор, показывающий, что оно готово принимать ввод.\u003Cbr\u003E","\u003Cp\u003EПри загрузке\u003Cbr\u003E\u003Cp\u003Eпри перезагрузке либо загрузке обычно фокус задают первому полю формы:\u003Cbr\u003E*при выполнении кода возникнет ошибка, если первое поле формы это input с атрибутом hidden, либо если оно скрыто при помощи css-свойств.\u003Cbr\u003E","\u003Cp\u003EМетод blur()\u003Cbr\u003E\u003Cp\u003EЭтот метод отменяет полю фокус и не назначает его никакому другому полю. Раньше он часто использовался, когда не было атрибута readonly, на данный момент практически не используется.\u003Cbr\u003E*Когда к тегу \u003Cinput\u003E добавляется атрибут readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью js.\u003Cbr\u003E","\u003Cp\u003EОбщие события полей форм\u003Cbr\u003E\u003Cp\u003EВсе поля форм поддерживают три события:\u003Cbr\u003Eblur - генерируется при утрате фокуса полем\u003Cbr\u003Echange - генерируется для элементов input и textarea при утрате фокуса, если свойство value было изменено, а также для элементов select при выборе другого элемента из списка\u003Cbr\u003Efocus - генерируется при получении фокуса полем\u003Cbr\u003E","\u003Cp\u003EРабота с текстовыми полями\u003Cbr\u003E\u003Cp\u003EСодержимое текстовых полей тегов input и textarea хранится в свойстве value, которое можно использовать для чтения и задания значения текстового поля, например:\u003Cbr\u003Ealert(‘form.value’);\u003Cbr\u003E","\u003Cp\u003EМетод substring\u003Cbr\u003E\u003Cp\u003EМетод substring возвращает подстроку, начиная с позиции indexA до, но не включая indexB.\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EЧастичное выделение текста\u003Cbr\u003E\u003Cp\u003EВ HTML5 разрешается выделять фрагменты текстовых полей. Для этого используется метод setSelectionRange(). Он принимает два аргумента: индекс первого выделяемого символа, и индекс конца выделения\u003Cbr\u003E","\u003Cp\u003E \u003Cbr\u003EУ каждого поля можно назначить максимальное количество вводимых символов:\u003Cbr\u003E","\u003Cp\u003EЗадание 4\u003Cbr\u003E\u003Cp\u003EСоздать форму в HTML с полем ввода и кнопкой отправки. На submit формы, если поля ввода пустое, делать фокус на поле ввода.\u003Cbr\u003E","\u003Cp\u003EЗадание 5\u003Cbr\u003E\u003Cp\u003EСоздать форму в HTML с полями для ввода имени, фамилии, телефона и сообщения. Для поля телефона задать максимальное количество символов 13, сообщение может быть большим. При submit формы создавать объект со всеми значениями формы и выводить его.\u003Cbr\u003E"],href:"\u002Fprezentacii-po-informatike\u002Frabota-s-formami-rabota-s-tekstovymi",href_category:"\u002Fprezentacii-po-informatike",date:1614719700,related:[{id:1061775,name:"Надежность программных продуктов",href:"\u002Fprezentacii-po-informatike\u002Fnadezhnost-programmnyh-produktov",jpg:"jpg\u002F1061775"},{id:1045055,name:"Характеристика производственной системы. Тема №4",href:"\u002Fprezentacii-po-informatike\u002Fharakteristika-proizvodstvennoy-sistemy-tema-n4",jpg:"jpg\u002F1045055"},{id:1077030,name:"Циклы по переменной. Программирование на языке Python",href:"\u002Fprezentacii-po-informatike\u002Ftsikly-po-peremennoy-programmirovanie-na-yazyke",jpg:"jpg\u002F1077030"},{id:862676,name:"Основная страница сайта (системы)",href:"\u002Fprezentacii-po-informatike\u002Fosnovnaya-stranitsa-sayta-sistemy",jpg:"jpg\u002F862676"},{id:1076939,name:"Планирование и реализация веб-сайта службы социальной помощи",href:"\u002Fprezentacii-po-informatike\u002Fplanirovanie-i-realizatsiya-veb-sayta-sluzhby",jpg:"jpg\u002F1076939"},{id:1079535,name:"Моя информационная культура",href:"\u002Fprezentacii-po-informatike\u002Fmoya-informatsionnaya-kultura",jpg:"jpg\u002F1079535"},{id:1022846,name:"Понятие модели. Графические информационные модели. 8 класс",href:"\u002Fprezentacii-po-informatike\u002Fponyatie-modeli-graficheskie-informatsionnye-modeli-8",jpg:"jpg\u002F1022846"},{id:935086,name:"Решение задач с одномерным массивом",href:"\u002Fprezentacii-po-informatike\u002Freshenie-zadach-s-odnomernym-massivom-1",jpg:"jpg\u002F935086"},{id:916461,name:"Технология работы с информационными источниками",href:"\u002Fprezentacii-po-informatike\u002Ftehnologiya-raboty-s-informatsionnymi-istochnikami-2",jpg:"jpg\u002F916461"},{id:1103199,name:"Развлечения и безопасность в сети Интернет",href:"\u002Fprezentacii-po-informatike\u002Frazvlecheniya-i-bezopasnost-v-seti-internet",jpg:"jpg\u002F1103199"},{id:1092448,name:"Инструкция по формированию электронных документов по информационному взаимодействию",href:"\u002Fprezentacii-po-informatike\u002Finstruktsiya-po-formirovaniyu-elektronnyh-dokumentov-po",jpg:"jpg\u002F1092448"},{id:1065764,name:"Разработка системы приема заявок на проведение работ по ремонту компьютерного оборудования для организации",href:"\u002Fprezentacii-po-informatike\u002Frazrabotka-sistemy-priema-zayavok-na-provedenie-1",jpg:"jpg\u002F1065764"},{id:936376,name:"Основы журналистики. Контрольная работа",href:"\u002Fprezentacii-po-informatike\u002Fosnovy-zhurnalistiki-kontrolnaya-rabota",jpg:"jpg\u002F936376"},{id:1159747,name:"Pascal ABC. Работа с числовыми данными. Целые числа. Целочисленные переменные. Урок 5-6",href:"\u002Fprezentacii-po-informatike\u002Fpascal-abc-rabota-s-chislovymi-dannymi-1",jpg:"jpg\u002F1159747"},{id:1156254,name:"Директивы #region и #endregion (C#)",href:"\u002Fprezentacii-po-informatike\u002Fdirektivy-region-i-endregion-c-55-2",jpg:"jpg\u002F1156254"},{id:1089368,name:"Автоматизированная генерация тестов с помощью программного обеспечения",href:"\u002Fprezentacii-po-informatike\u002Favtomatizirovannaya-generatsiya-testov-s-pomoshchyu-programmnogo",jpg:"jpg\u002F1089368"},{id:482907,name:"«ДОПОЛНИТЕЛЬНЫЕ УСТРОЙСТВА»",href:"\u002Fprezentacii-po-informatike\u002Fdopolnitelnye-ustrojstva-1",jpg:"jpg\u002F482907"},{id:1082266,name:"Язык UML. Диаграммы компонентов",href:"\u002Fprezentacii-po-informatike\u002Fyazyk-uml-diagrammy-komponentov",jpg:"jpg\u002F1082266"},{id:1093798,name:"Пример Stories для показа новинок сериалов выходящих в сервисе Амедиатека",href:"\u002Fprezentacii-po-informatike\u002Fprimer-stories-dlya-pokaza-novinok-serialov",jpg:"jpg\u002F1093798"},{id:1019638,name:"Устройства персонального компьютера",href:"\u002Fprezentacii-po-informatike\u002Fustroystva-personalnogo-kompyutera-2",jpg:"jpg\u002F1019638"},{id:1114849,name:"Технологии, используемые при проектировании виртуальной выставки",href:"\u002Fprezentacii-po-informatike\u002Ftehnologii-ispolzuemye-pri-proektirovanii-virtualnoy-vystavki",jpg:"jpg\u002F1114849"},{id:1099249,name:"Перспективы развития интернет-технологий",href:"\u002Fprezentacii-po-informatike\u002Fperspektivy-razvitiya-internet-tehnologiy",jpg:"jpg\u002F1099249"},{id:960256,name:"Исполнитель робот в среде программирования",href:"\u002Fprezentacii-po-informatike\u002Fispolnitel-robot-v-srede-programmirovaniya-2",jpg:"jpg\u002F960256"},{id:925859,name:"Сайт для поиска преподавателей",href:"\u002Fprezentacii-po-informatike\u002Fsayt-dlya-poiska-prepodavateley",jpg:"jpg\u002F925859"},{id:969814,name:"Проверка и оценка навыков работы с текстовым процессором MS Word",href:"\u002Fprezentacii-po-informatike\u002Fproverka-i-otsenka-navykov-raboty-s",jpg:"jpg\u002F969814"},{id:936722,name:"Аргус WFM Конвергент",href:"\u002Fprezentacii-po-informatike\u002Fargus-wfm-konvergent",jpg:"jpg\u002F936722"},{id:977015,name:"Информатика. Введение в специальность",href:"\u002Fprezentacii-po-informatike\u002Finformatika-vvedenie-v-spetsialnost",jpg:"jpg\u002F977015"},{id:1113605,name:"Report of the Advertising campaign",href:"\u002Fprezentacii-po-informatike\u002Freport-of-the-advertising-campaign",jpg:"jpg\u002F1113605"}],navigation:{next:"\u002Fprezentacii-na-razlichnye-temy\u002Fproekt-byudzheta-dvizheniya-denezhnyh-sredstv-na",next_name:"Проект бюджета движения денежных средств на 2021 г",prev:"\u002Fprezentacii-na-razlichnye-temy\u002Fao-ab-rossiya",prev_name:"АО АБ Россия"}}},categories:{result:[{id:K,ordering:a,name:"Алгебра",pseudoname:"prezentacii-po-algebre"},{id:2,ordering:a,name:"Английский язык",pseudoname:"prezentacii-po-angliyskomu-yaziku"},{id:3,ordering:a,name:"Астрономия",pseudoname:"prezentacii-po-astronomii"},{id:4,ordering:a,name:"Биология",pseudoname:"prezentacii-po-biologii"},{id:5,ordering:a,name:"География",pseudoname:"prezentacii-po-geografii"},{id:6,ordering:a,name:"Геометрия",pseudoname:"prezentacii-po-geometrii"},{id:7,ordering:a,name:I,pseudoname:"prezentacii-po-informatike"},{id:8,ordering:a,name:"История",pseudoname:"prezentacii-po-istorii"},{id:9,ordering:a,name:"Литература",pseudoname:"prezentacii-po-literature"},{id:10,ordering:a,name:"Математика",pseudoname:"prezentacii-po-matematike"},{id:11,ordering:a,name:"Медицина",pseudoname:"prezentacii-po-medicine"},{id:h,ordering:a,name:"Музыка",pseudoname:"prezentacii-po-musice"},{id:13,ordering:a,name:"МХК",pseudoname:"prezentacii-po-mkhk"},{id:14,ordering:a,name:"ОБЖ",pseudoname:"prezentacii-po-obzh"},{id:15,ordering:a,name:"Обществознание",pseudoname:"prezentacii-po-obshhestvoznaniju"},{id:17,ordering:a,name:"Педагогика",pseudoname:"prezentacii-po-pedagogike"},{id:18,ordering:a,name:"Немецкий язык",pseudoname:"prezentacii-po-nemezkomy-yaziku"},{id:20,ordering:a,name:"Русский язык",pseudoname:"prezentacii-po-russkomu-yazyku"},{id:21,ordering:a,name:"Технология",pseudoname:"prezentacii-po-tehnologii"},{id:22,ordering:a,name:"Физика",pseudoname:"prezentacii-po-fizike"},{id:23,ordering:a,name:"Философия",pseudoname:"prezentacii-po-filosofii"},{id:24,ordering:a,name:"Химия",pseudoname:"prezentacii-po-himii"},{id:25,ordering:a,name:"Экология",pseudoname:"prezentacii-po-ehkologii"},{id:26,ordering:a,name:"Экономика",pseudoname:"prezentacii-po-ekonomike"},{id:27,ordering:a,name:"Детские презентации",pseudoname:"detskie-prezentacii"},{id:i,ordering:a,name:"Шаблоны презентаций",pseudoname:"shablony-dlya-prezentacii"},{id:29,ordering:a,name:"Разное",pseudoname:"prezentacii-na-razlichnye-temy"},{id:48,ordering:a,name:"Культурология",pseudoname:"kulturologiya"},{id:16,ordering:K,name:"Окружающий мир",pseudoname:"prezentacii-po-okruzhayushhemu-miru"}]}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:L,SITE_HOST:"slaidy.com",SITE_LANG:M,API_BASE_URL:"https:\u002F\u002Fslaidy.com\u002Fapi\u002F",pwaManifest:{name:L,short_name:b,description:b,lang:M,start_url:"\u002F?standalone=true",display:"standalone",background_color:k,theme_color:j,icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.d7f48e96.png",type:d,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.d7f48e96.png",type:d,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.d7f48e96.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.d7f48e96.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.d7f48e96.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.d7f48e96.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.d7f48e96.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.d7f48e96.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.d7f48e96.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.d7f48e96.png",type:d,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.d7f48e96.png",type:d,sizes:S,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.d7f48e96.png",type:d,sizes:S,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.d7f48e96.png",type:d,sizes:T,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.d7f48e96.png",type:d,sizes:T,purpose:g}]},yandexMetrika:{id:"79446466",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:a,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:b}},pinia:{app:{meta:{h1:l,main_text:b,main_title:m,main_description:n,main_keywords:o,main_image:b},app:{logo_image:p,logo_image_width:i,logo_image_height:q,logo_text:r,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:e,banner_1:b,banner_2:b,banner_3:b,banner_4:b,banner_5:b,banner_6:b,banner_7:b,banner_8:b,banner_9:b,banner_10:b,email:w,footer_before:x,footer:y,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:z,item_images:A,item_images_tag:B,item_words_h3:c,item_words_tag:C,item_words_1:h,routing:D,item_slide_skipping:E,item_download_timeout:F,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:j,header_bg:k,accent:G}},social:H,token:b}}}}(0,"",false,"image\u002Fpng",true,"any","maskable",12,28,"#000000","#ffffff","Презентации, проекты, доклады в PowerPoint на любую тему","Презентации и проекты в PowerPoint","Презентации на различные темы для детей, школьников, родителей, студентов, учителей и преподавателей.","Презентация, презентация на тему, скачать презентацию, урок презентация, 1 2 3 4 5 6 7 8 9 10 11 класс","images\u002Fdata\u002Flogo.jpg",32,"Slaidy.com",720,480,"6LdhFOUnAAAAAIaOUjFtosEpzs6Ny643k1QKXXvv","3190226","[e-mail]","\u003C!--LiveInternet counter--\u003E\u003Ca href=\"https:\u002F\u002Fwww.liveinternet.ru\u002Fclick\"\r\ntarget=\"_blank\"\u003E\u003Cimg id=\"licnt7D89\" width=\"88\" height=\"31\" style=\"border:0\" \r\ntitle=\"LiveInternet: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня\"\r\nsrc=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAEALAAAAAABAAEAAAIBTAA7\"\r\nalt=\"LiveInternet\"\u002F\u003E\u003C\u002Fa\u003E\u003Cscript\u003E(function(d,s){d.getElementById(\"licnt7D89\").src=\r\n\"https:\u002F\u002Fcounter.yadro.ru\u002Fhit?t12.1;r\"+escape(d.referrer)+\r\n((typeof(s)==\"undefined\")?\"\":\";s\"+s.width+\"*\"+s.height+\"*\"+\r\n(s.colorDepth?s.colorDepth:s.pixelDepth))+\";u\"+escape(d.URL)+\r\n\";h\"+escape(d.title.substring(0,150))+\";\"+Math.random()})\r\n(document,screen)\u003C\u002Fscript\u003E\u003C!--\u002FLiveInternet--\u003E","\u003Ca href=\"\u002Fpage\u002Fpravoobladateliam\"\u003EДля правообладателей\u003C\u002Fa\u003E","h3a","images_before","none","h3","category","both",77,"#ff0d00","\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Информатика","Работа с формами. Работа с текстовыми полями и проверка их содержимого ",1,"Slaidy","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))</script><script type="module" src="/_nuxt/entry.e6b1bc94.js" crossorigin></script></body>
</html>