Перейти к содержимому

Формы в html

Как записать формы на языке HTML

          Здравствуйте гости сайта и этой страницы!  Уже изучено достаточно элементов, изучены заголовки, абзацы, вставка изображения, ссылки, как записывать коментарий, списки и научились создавать, и записывать таблицы кодами html.   Сегодня мы перейдём к созданию форм. Чтобы создать форму, сначала нужен контейнер при помощи тегов   <form></form>, этот тег является парным и блочным. И между данными тегами записываются различные элементы форм, - текстовые поля, флажки, кнопки, переключатели, также в этом контейнере можно записывать другие теги для разметки содержимого. Сейчас мы создадим таблицу, в которой запишем различные элементы форм. Меду строчными тегами <tr></tr> создадим 2 ячейки <td></td>. И при помощи тега –input-, атрибута  -type- запишем,-это текстовое поле, значит значение "text".

<form>

  <table>

          <tr>

             <td>Текстовое поле:</td>

            <td><input type="text"></td>

          </tr>

  </table>

</form>

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

foto

       Так выглядит текстовое поле,- далее, поле для ввода пароля. Это поле создаётся так же как и поле выше, только вместо –text- записывается слово –password-

<form>

  <table>

       <tr>

             <td>Текстовое поле:</td>

            <td><input type="text"></td>

          </tr>

                     <tr>

             <td>Поле для ввода пароля:</td>

            <td><input type=" password "></td>

                    </tr>

       </table>

</form>

Не забываем сохранять и обновлять браузер и вот что получилось:

foto

Если в текстовом поле записываются буквы, то в поле для ввода пароля буквы отображаются точками ……..

- Далее текстовая область, которая нужна для написания длинных сообщений и создаётся при помощи парного тега <textarea></textarea>.

<form>

  <table>

          <tr>

             <td>Текстовое поле:</td>

            <td><input type="text"></td>

          </tr>

                     <tr>

             <td>Поле для ввода пароля:</td>

            <td><input type=" password "></td>

                    </tr>

                           <tr>

             <td>Текстовая область:</td>

            <td><textarea></textarea></td>

                         </tr>

             </table>

      </form>           вот так отобразит браузер:

foto

   В нижней текстовой области можно вводить длинные сообщения состоящих из нескольких строк. Следуем дальше и создаём выпадающий список который записывается между тегами <select></select>  и каждый пункт записывается между тегами <option></option>.

<form>

  <table>

          <tr>

             <td>Текстовое поле:</td>

            <td><input type="text"></td>

          </tr>

                     <tr>

             <td>Поле для ввода пароля:</td>

            <td><input type=" password "></td>

                    </tr>

                           <tr>

             <td>Текстовая область:</td>

            <td><textarea></textarea></td>

                         </tr>

                           <tr>

             <td>Выпадающий список:</td>

            <td>

<select>

<option>Значение 1</option>

<option>Значение 2</option>

<option>Значение 3</option>

</select> 

     </td>

                 </tr>

               </table>

      </form>       сохраняем, обновляем браузер и смотрим:

foto

Щелкните в нижней рамочке и выпадет рамочка со всеми значениями, где можно выбрать только одно значение из списка. Если дать возможность пользователям выбрать несколько значений, то воспользуемся атрибутом multiple с таким же значением "multiple" и запишем:

<form>

  <table>

          <tr>

             <td>Текстовое поле:</td>

            <td><input type="text"></td>

          </tr>

                     <tr>

             <td>Поле для ввода пароля:</td>

            <td><input type=" password "></td>

                    </tr>

                           <tr>

             <td>Текстовая область:</td>

            <td><textarea></textarea></td>

                         </tr>

                           <tr>

             <td>Выпадающий список:</td>

            <td>

<select multiple="multiple">

<option>Значение 1</option>

<option>Значение 2</option>

<option>Значение 3</option>

</select> 

     </td>

                 </tr>

               </table>

      </form>        и список будет выглядеть:

Где можно выбрать несколько значений. Переходим к флажкам. Флажки, как и текстовые поля создаются при помощи тега –input- в типе нужно указать "checkbox" и записываем:

<form>

       <table>

                   <tr>

                      <td>Текстовое поле:</td>

                      <td><input type="text"></td>

                         </tr>

                                <tr>

                      <td>Поле для ввода пароля:</td>

                      <td><input type="password"></td>

                           </tr>

                                         <tr>

                      <td>Текстовая область:</td>

                      <td><textarea></textarea></td>

                           </tr>

                                               <tr>

                      <td>Выпадающий список:</td>

                      <td>

                             <select multiple="multiple">

                                                       <option>Значение 1</option>

                                      <option>Значение 2</option>

                                      <option>Значение 3</option>

                      </select>

                      </td>

                           </tr>

                                          <tr>

                      <td>Флажки:</td>

                      <td>

                           <label><input type="checkbox">Значение 1</label>

                           <label><input type="checkbox">Значение 2</label>

                           <label><input type="checkbox">Значение 3</label>

                      </td>

                           </tr>

        </form>

            </table>

         Тег <label></label> для создания маленького прямоугольника, для создания метки, здесь создано несколько значений, щелкните по слову и появится метка в окошечке, без тега <label></label> нужно будет щелкать по окошечку, чтобы появилась метка, если кликните по слову, метка (в виде v) в окошечке не появится. И смотрим в браузере:

foto

     И как видно, что все элементы являются строчными элементами. Дальше рассмотрим и запишем –переключатели-. Они создаются так же как флажки, при помощи тега –input- только в типе нужно указать слово "radio", так же нужно указать имя с помощью атрибута –name-, имя в переключателях должно быть одинаковым, например: "rad". Сделаем как и флажки, группу переключателей и запишем:

<tr>

<td>Переключатели:</td>

         <td>

<label><input type="radio" name="rad">Значение 1</label>

<label><input type="radio" name="rad" >Значение 2</label>

<label><input type="radio" name="rad">Значение 3</label>

     </td>  

         </tr>      и выглядит это так:

 foto

Щёлкая по кнопкам переключателей, будет отображаться один переключатель из-за одинакового имени, если указать разные имена для атрибута – name-, то переключатели будут работать как флажки – это не правильно.

Создаём поле для выбора файла – это поле создаётся так же при помощи тега - input- , но в типе ( type ) должно стоять значение "file", записываем:

            <tr>

                      <td>Поле для выбора файла:</td>

                      <td><input type="file"></td>

             </tr>              смотрим в браузере:

foto

       Щёлкните по полю –выбрать файл- откроется окно вашего компьютера для выбора файла. После выбора файла ничего происходить не будет, потому что html позволяет выводить элементы на экран. Для обработки данных в форме есть специальная программа написанная на одном из языков программирования. Дальше перейдём к кнопкам, существуют несколько вариантов, которые позволяют вывести на экран кнопку и чаще всего используется тег <button></button> -это строчный парный тег, так же есть и другие варианты, которые выводятся на экран при помощи тега – input- и его обязательных атрибутов – type- с типом –button- (обычная кнопка) с атрибутом –value-, который позволяет задать имя кнопки. Кнопка для отправки данных введённых в форму type="submit", кнопка для очистки формы  type="reset", кнопка в виде изображения type="image" и место хранения изображения src="images/guby.png". Где –src- указывает путь к изображению, теперь всё запишем:

              <tr>

                      <td>Кнопки:</td>

                      <td>

                      <button><strong>Кнопка</strong></button>

                      <input type="button" value="Кнопка button ">

                      <input type="submit" value="Кнопка submit ">

                      <input type="reset"  value="Кнопка reset ">

                      <input type="image"  src="images/guby.png">

                             </td>

                           </tr>      сохраняем изменения в текстовом редакторе и обновляем браузер:

foto

Вот так всё записанное выглядит в браузере. Слева обычная кнопка созданная при помощи тега "button", следующая кнопка созданная тегом –input- с типом "button", следующая с тегом –input- с типом "submit" и последняя –reset- для очистки форм текстовых полей и кнопок. Тег <button></button> можно использовать вне тега – контейнера <form></form> - это не будет ошибкой. Между этими тегами можно вставлять различные строчные теги, например: <button><strong>Кнопка</strong></button>, кнопка будет выделена жирным шрифтом, что нельзя сделать при использовании тега –input- . Тег –input- нельзя использовать вне контейнера <form></form>, если использовать, то будет ошибкой. Здесь показаны основные элементы форм, которые можно создать в документе html. Сейчас запишем простую форму обратной связи.

<!--Обратная связь-->

        <h3>Обратная связь</h3>

 <form>

         <table>

                   <tr>

                   <td>Введите ваше имя:</td>

                   <td><input type="text"></td>

                   </tr>

                            <tr>

                   <td>Укажите тему запроса:</td>

                            <td>

                            <select>

                                      <option>Значение 1</option>

                                      <option>Значение 2</option>

                                      <option>Значение 3</option>

                            </select>

                             </td>

                            </tr>

                      <tr>

                     <td>Введите ваше сообщение:</td>

                             <td><textarea></textarea></td>

                      </tr>

                            <tr>

                            <td>Прикрепить файлы:</td>

                            <td><input type="file"></td>

                                        </tr>

                                          <tr>

                            <td>Прикрепить файлы:</td>

                                                <td><button type="submit">Отправить</button> <button type="reset">Очистить форму</button></td>

                   </tr>

                           </table>

                      </form>

 Здесь поля для указания имени, указания темы, поле для ввода сообщения, поле для прикрепления файла, кнопка отправить и кнопка для очистки формы. Всё это расположено в контейнере <form></form> . И выглядит это в браузере:

foto

Сайт скачать здесь...test sait