Html образец – HTML

alexxlab

Содержание

Полное руководство по элементам HTML-формы

Создание HTML-формы – неотъемлемая часть сайта и важный навык веб-разработчиков. Используйте это руководство для изучения элементов HTML-форм.


Введение

HTML-формы требуются для сбора данных от посетителей сайта. Например, при регистрации на Uber, Netflix или Facebook пользователь вводит свое имя, почту и пароль.

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

Элемент Form

Элемент Form (<form></form>) оборачивает все элементы внутри HTML-формы.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
      
      </form>
    </body>
</html>

Атрибуты:

  • action – это веб-адрес (URL) программы, которая обрабатывает данные формы.
  • Method – это HTTP метод, который используется браузером для отправки формы.
  • Возможные значения: POST или GET. POST – отправляет данные формы на сервер.
    GET – данные отправляются внутри URL, параметры разделяются знаком «?».

Примечание: Нельзя создать форму внутри формы. То есть использование элемента <form> внутри другого элемента <form> недопустимо.

Элемент Input

Это самый популярный элемент HTML-формы. Используется для создания текстовых полей, в которые пользователь вводит информацию (например: пароль, адрес почты и т. д.).

Создадим текстовое поле, в которое пользователь сможет ввести свое имя.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <input type="text" name="student_name">
      </form>
    </body>
</html>

В примере выше над тегом input были добавлены три атрибута.

type

Указывает на тип ввода. При значении text пользователь должен вводить текстовые данные. У этого атрибута имеется множество значений, например, email, tel (для номера телефона), password и т. д.

Пример: при попытке зайти в свой профиль на сайте (Amazon/Netflix) необходимо указать почту и пароль. Для этих целей используется элемент input. Атрибуты type будут иметь значения email и password соответственно.

id

Это не обязательное, но весьма полезное поле HTML-формы. Например, для определения элементов в CSS/JavaScript. Идентификаторы используются для сопоставления меток с нужными элементами управления формой.

name

Обязательный атрибут. При передаче HTML-формы в серверный код сервер должен интерпретировать данные из формы и правильно их обработать.

placeholder

Атрибут подсказывает пользователю, что именно необходимо ввести в поле ввода HTML-формы. Исчезает, как только пользователь начинает печатать в поле.

Примечание: Использование разных значений в атрибуте type выводит разный результат:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <input type="text" name="student_name">
          <input type="email" name="student_email">
          <input type="password" name="student_password">
      </form>
    </body>
</html>

Элементы input без placeholder:

Элементы input с placeholder:

Элемент textarea

Иногда одной строки текста бывает недостаточно, а простой элемент input совершенно не подходит. Например, на некоторых сайтах добавляются формы, в которых пользователи оставляют свои отзывы и задают вопросы. В таких случаях лучше прибегнуть к элементу textarea.

Элемент <textarea> не является самозакрывающимся тегом, поэтому требует открывающей и закрывающей скобки.

Атрибуты:

  • id – см. <input/>.
  • name – см. <input/>.
  • cols – задает видимую ширину текстовой области.
  • rows – задает видимое количество строк в текстовой области.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <textarea name="student_bio"></textarea>
      </form>
    </body>
</html>

Примечание: В большинстве браузеров можно изменять размер элемента.

Элемент button

Один из важнейших элементов HTML-формы. Без кнопки вы не сможете отправить и обработать данные формы на сервере.

В элементе задается атрибут type, который может принимать три разных значения: submit, reset и button.

Атрибуты:

  • type=”reset” – при нажатии очищает все данные формы.
  • type=”button” –  в нем нет какого-то стандартного поведения. В основном используется в JavaScript для программирования настраиваемого поведения.
  • type=”submit” – стандартное поведение кнопки «Отправить», т. е. передача данных на сервер.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
        
          <input type="text" name="student_name">
          <input type="email" name="student_email">
          <input type="password" name="student_password">
          
          <textarea name="student_bio"></textarea>
          
          <button type="submit">Submit</button>
        
      </form>
    </body>
</html>

Элемент label

Пока что пользователь не сможет понять, для чего нужен каждый элемент HTML-формы. Вы не можете предугадать, куда вводить адрес почты, а куда – пароль. Формы смотрятся недоделанными и непонятными.

Каждую строку HTML-формы можно отметить элементом label.

Наиболее популярным атрибутом label является for.

Атрибуты:

for – связывает метку строки с определенным элементом формы. Соответствие проверяется по ID. Значением атрибута ID для элемента input в примере выше является email. Оно совпадает со значением атрибута for для элемента label. Таким образом, оба элемента связаны.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <label for="name">Name</label>
          <input type="text" name="student_name">

          <label for="mail">Email</label>
          <input type="email" name="student_email">

          <label for="password">Password</label>
          <input type="password" name="student_password">

          <label for="bio">Biography</label>
          <textarea name="student_bio"></textarea>

          <button type="submit">Submit</button>
      </form>
    </body>
</html>

Примечание: если навести мышкой на метку (название строки), то активируется поле ввода, связанное с данной меткой Это стандартное поведение элемента.

Меню select

Иногда требуется создание HTML-формы, в которой пользователь будет выбирать определенные значения.

Для экономии места в интерфейсе рекомендуется выносить все списки длиннее 4-5 пунктов в меню select.

Пример: форма для поступления в университет, в которой студенты выбирают нужный профиль подготовки.

Элементу <select> нужны открывающие и закрывающие теги.

<select> отображает выпадающее меню с заданными значениями. Сам по себе элемент select не выполняет никаких действий, т.к. ему нужны дополнительные теги (элементы option). Здесь можно провести параллель с тегом <ul>, которому необходимы элементы <li>.

Атрибуты:

  • name
    – см. <input/>.
  • <option> – вариант выбора из меню select. Использует атрибут value.

value – при отправке формы на сервер каждый элемент обладает определенным значением (value) для текстовых полей и областей. Иными словами, value – это все, что пользователь указывает в поле. Но при создании меню select с готовыми опциями необходимо заранее определять в них value.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <h3>Your basic info</h3>

          <label for="name">Name</label>
          <input type="text" name="student_name">

          <label for="mail">Email</label>
          <input type="email" name="student_email">

          <label for="password">Password</label>
          <input type="password" name="student_password">

          <h3>Your profile</h3>

          <label for="bio">Biography</label>
          <textarea name="student_bio"></textarea>

          <label for="courses">Select Courses</label>
          <select name="student_courses">
              <option value="computer_engineering">Computer Science Engineering</option>
              <option value="slectrical_engineering">Electrical Engineering</option>
              <option value="mechanical_engineering">Mechanical Engineering</option>
              <option value="civil_engineering">Civil Engineering</option>
              <option value="chemical_engineering">Chemical Engineering</option>
          </select>
          
        <button type="submit">Submit</button>
      </form>
    </body>
</html>

Для формы выбора курса также задается элемент label. Кроме того, списки можно упорядочить по логическим группам. Для этих целей используется элемент <optgroup>.

Атрибуты:

label: – название группы опций (вариантов). В примере ниже варианты выбора делятся на две группы с меткой Engineering (Проектирование) и Management (Управление).

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <h3>Your basic info</h3>

          <label for="name">Name</label>
          <input type="text" name="student_name">

          <label for="mail">Email</label>
          <input type="email" name="student_email">

          <label for="password">Password</label>
          <input type="password" name="student_password">

          <h3>Your profile</h3>

          <label for="bio">Biography</label>
          <textarea name="student_bio"></textarea>

          <label for="courses">Select Courses</label>
          <label for="courses">Select Courses</label>
          <select name="student_courses">
            <optgroup label="Engineering">
              <option value="computer_engineering">Computer Science</option>
              <option value="electrical_engineering">Electrical</option>
              <option value="mechanical_engineering">Mechanical</option> 
              <option value="chemical_engineering">Chemical</option>
              <option value="civil_engineering">Civil</option>
            </optgroup>
            <optgroup label="Management">
              <option value="finance_management">Finance Management</option>
              <option value="technology_management">Technology</option>
              <option value="marketing_management">Marketing</option>
              <option value="business_administration">Business</option>     
            </optgroup>
          </select>

        <button type="submit">Submit</button>
      </form>
    </body>
</html>

Радиокнопки

Меню select – это идеальное решение для HTML-формы с объемным списком. Однако при наличии 5 и менее вариантов выбора, лучше реализовать их через радиокнопки.

В отличие от меню select, радиокнопки (radio button) сразу показывают все доступные опции. Пользователь по-прежнему может выбрать только один вариант.

Атрибуты:

  • name – см. <input/>.
  • value – определение значений заданных вариантов.

Примечание: При выделении одного варианта и попытке выделения другого первый выбор удалится. Это реализуется благодаря атрибуту name, в котором прописана принадлежность этих двух радиокнопок к одной группе.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <h3>Your basic info</h3>

          <label for="name">Name</label>
          <input type="text" name="student_name">

          <label for="mail">Email</label>
          <input type="email" name="student_email">

          <label for="password">Password</label>
          <input type="password" name="student_password">

          <label>Age:</label>
          <input type="radio" value="under_16" name="user_age"><label for="under_16">Under 16</label><br>
          <input type="radio" value="over_16" name="user_age"><label for="over_16">16 or Older</label>

          <h3>Your profile</h3>

          <label for="bio">Biography</label>
          <textarea name="student_bio"></textarea>

          <label for="courses">Select Courses</label>
          <select name="student_courses">
            <optgroup label="Engineering">
              <option value="computer_engineering">Computer Science Engineering</option>
              <option value="slectrical_engineering">Electrical Engineering</option>
              <option value="mechanical_engineering">Mechanical Engineering</option>
              <option value="civil_engineering">Civil Engineering</option>
              <option value="chemical_engineering">Chemical Engineering</option>
            </optgroup>
            <optgroup label="Management">
              <option value="finance_management">Finance Management</option>
              <option value="technology_management">Technology Management</option>
              <option value="marketing_management">Marketing Management</option>
              <option value="business_administration">Business Administration</option>
            </optgroup>
          </select>

        <button type="submit">Submit</button>
      </form>
    </body>
</html>

Примечание: Внутри одной группы радиокнопок атрибут name должен быть одинаковым.

Чекбоксы

Иногда необходимо создать некую группу различных вариантов, из которых пользователь сможет выбрать несколько. С этим помогут чекбоксы.

Атрибуты:

  • name – см. <input/>.
  • value – определение значений заданных вариантов.
  • checked – отметка о предвыборе данного варианта, т.к. по умолчанию у чекбоксов нет выбранного значения. Важно помнить, что это логический атрибут (boolean).
<input type="checkbox" checked value="abhishek" name="user_name" />

В примере ниже каждый отдельный вариант использовался с метками (элементом label). Для объединения чекбоксов и меток внутри HTML-формы использовался атрибут for для label и атрибут id для checkbox.

Примечание: поскольку кликать по маленьким чекбоксам неудобно, лучше оборачивать элемент <label>  вокруг каждого чекбокса. Тогда при клике в области метки выделение чекбокса будет добавляться или сниматься. Однако в примере ниже этого не сделано.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          
          <h3>Your basic info</h3>
          
          <label for="name">Name</label>
          <input type="text" name="student_name">

          <label for="mail">Email</label>
          <input type="email" name="student_email">

          <label for="password">Password</label>
          <input type="password" name="student_password">

          <label>Age:</label>
          <input type="radio" value="under_16" name="user_age"><label for="under_16">Under 16</label><br>
          <input type="radio" value="over_16" name="user_age"><label for="over_16">16 or Older</label>

          <h3>Your profile</h3>
          
          <label for="bio">Biography</label>
          <textarea name="student_bio"></textarea>

          <label for="courses">Select Courses</label>
          <select name="student_courses">
            <optgroup label="Engineering">
              <option value="computer_engineering">Computer Science Engineering</option>
              <option value="slectrical_engineering">Electrical Engineering</option>
              <option value="mechanical_engineering">Mechanical Engineering</option>
              <option value="civil_engineering">Civil Engineering</option>
              <option value="chemical_engineering">Chemical Engineering</option>
            </optgroup>
            <optgroup label="Management">
              <option value="finance_management">Finance Management</option>
              <option value="technology_management">Technology Management</option>
              <option value="marketing_management">Marketing Management</option>
              <option value="business_administration">Business Administration</option>
            </optgroup>
          </select>

          <label>Interests:</label>
          <input type="checkbox" value="interest_engineering" name="user_interest"><label for="engineering">Engineering</label><br>
          <input type="checkbox" value="interest_business" name="user_interest"><label for="business">Business</label><br>
          <input type="checkbox" value="interest_law" name="user_interest"><label for="law">Law</label>
        
        <button type="submit">Submit</button>
      </form>
    </body>
</html>

Отличия чекбоксов от радиокнопок HTML-формы

Чекбокс может существовать сам по себе. Радикнопки появляются только в качестве группы (минимум 2 кнопки).
В отличие от радиокнопки выбор чекбокса не является обязательным.

Конечный результат

В статье было представлено пошаговое руководство по созданию HTML-формы. Не старайтесь запомнить все и сразу – ни один разработчик не сможет назвать каждый атрибут или элемент. Гораздо важнее научиться ориентироваться в документации.

Вы можете добавить в эти примеры CSS и создать собственные формы.

Перевод статьи Abhishek Jakhar: A step-by-step guide to getting started with HTML forms

proglib.io

HTML Формы

Элемент <form>

Элемент <form> определяет форму, используемую для получения данных, вводимых пользователем:

<form>
.
элементы формы
.
</form>

Форма HTML содержит элементы формы.

Элементы образуют различные типы элементов ввода как текстовые поля, чекбоксы, радио-кнопки, кнопки, и многое другое.

Элемент ввода

Элемент <input> это самый важный элемент формы.

Элемент <input> может быть показан несколькими способами, в зависимости от атрибута type.

Вот некоторые примеры:

ТипыОписание
<input type=»text»>Определяет однострочное текстовое поле ввода
<input type=»radio»>Определяет переключатель (для выбора одного из вариантов)
<input type=»submit»>Определяет кнопку «Отправить» (для отправки формы)

Вы узнаете намного больше о типах входных позже в этом учебнике.

Ввод Текста

<input type=»text»> определяет однострочное поле ввода ввод текста:

Пример

<form>
 Имя:<br>
 <input type=»text» name=»firstname»><br>
 Фамилия:<br>
 <input type=»text» name=»lastname»>
</form>

Редактор кода »

Вот как это будет выглядеть в браузере:

Имя:

Фамилия:

Примечание: Сама форма не видна. Также обратите внимание, что ширину по умолчанию для текстового поля 20 символов.

Переключатель входного сигнала

<input type=»radio»> определяет радио кнопку.

Переключатели позволяют пользователю выбрать один из ограниченного числа вариантов:

Пример

<form>
 <input type=»radio» name=»gender» value=»male» checked> Мужчина<br>
 <input type=»radio» name=»gender» value=»female»> Женщина<br>
 <input type=»radio» name=»gender» value=»other»> Другие
</form>

Редактор кода »

Вот как это будет выглядеть в браузере:

Мужчина
Женщина
Другие

Кнопка Отправки

<input type=»submit»> определяет кнопку для представления данных формы форме-обработчику.

Форма обработчик обычно сервер со скриптом для обработки входных данных.

Форма обработчик, указанный в форме атрибута action:

Пример

<form action=»action_page.php»>
 Имя:<br>
 <input type=»text» name=»firstname» value=»Микки»><br>
 Фамилия:<br>
 <input type=»text» name=»lastname» value=»Маус»><br><br>
 <input type=»submit» value=»Отправить»>
</form>

Редактор кода »

Вот как это будет выглядеть в браузере:

Атрибут действие

Атрибут action определяет действие, которое будет выполнено при отправке формы.

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

В приведенном выше примере, данные формы отправляются на страницу на сервере «action_page.php». На этой странице представлен серверный скрипт, который обрабатывает данные формы:

<form action=»action_page.php«>

Если атрибут аction отсутствует, действие разворачивается на текущей странице.

Атрибут метод

Атрибут method задает метод HTTP (GET или POST)для использования при отправки данных формы:

<form action=»action_page.php» method=»get»>

или:

<form action=»action_page.php» method=»post»>

Когда использовать GET?

Метод по умолчанию при отправке данных формы GET.

Однако, когда используется, представленные данных формы будет видны в поле адрес страницы:

action_page.php?firstname=Микки&lastname=Маус

Примечание: GET не должен использоваться при передаче секретной информации! GET лучше всего подходит для не больших, объемов данных, поскольку он имеет и ограниченый размер.

Когда использовать POST?

Всегда используйте POST, если данные форма содержит конфиденциальную или личную информацию. Метод POST не отображается представленных данных форм в поле адреса страницы.

POST не имеет ограничений по размеру и может использоваться для передачи больших объемов данных.

Атрибут name

Каждое поле ввода имеет атрибут name он должен быть представлен.

Если атрибут name не указан, сведения о том, что все поле ввода не будет отправлено.

Этот пример представляет только поле ввода «last name»:

Пример

<form action=»action_page.php»>
 Имя:<br>
 <input type=»text» value=»Микки»><br>
 Фамилия:<br>
 <input type=»text» name=»lastname» value=»Маус»><br><br>
 <input type=»submit» value=»Отправить»>
</form>

Редактор кода »

Группировка данных формы с <fieldset>

Элемент <fieldset> используется для группировки связанных данных в форме.

Элемент <legend> определяет название элемента <fieldset> .

Пример

<form action=»action_page.php»>
  <fieldset>
   <legend>Личная информация:</legend>
   Имя:<br>
   <input type=»text» name=»firstname» value=»Микки»><br>
   Фамилия:<br>
   <input type=»text» name=»lastname» value=»Маус»><br><br>
   <input type=»submit» value=»Отправить»>
  </fieldset>
</form>

Редактор кода »

Вот как это будет выглядеть в браузере:

Еще Примеры

Отправка электронной почтой из формы
Как отправить электронную почту из формы?

Проверьте себя с помощью упражнений!

Список атрибутов <form>:

АтрибутыОписание
accept-charsetЗадает кодировку, используемую в представленном виде (по умолчанию: Кодировка страницы).
actionЗадает адрес (URL), где для отправки формы (по умолчанию: отправка страницы).
autocompleteУказывает, если в браузере есть автозаполнение форме (по умолчанию: вкл).
enctypeЗадает кодировку представленных данных (по умолчанию в кодировке URL).
methodЗадает метод HTTP, используемый при отправке формы (по умолчанию: Get).
nameУказывает имя, используемое для идентификации формы (для использования DOM: document.forms.name).
novalidateУказывает, что браузер не должен проверять форму.
targetУказывает целевой адрес в атрибуте Action (по умолчанию: отдел обслуживания клиентов tel).

Вы узнаете больше об атрибутах форме в следующих главах.

schoolsw3.com

Учебник HTML 5. Статья «Формы»

Форма в HTML это часть документа, которая позволяет пользователю ввести интересующую нас информацию, которую впоследствии можно принять и обработать на стороне сервера. Другими словами, формы используются для сбора информации введённой пользователями.

Синтаксически парный тег <form> определяет форму в HTML документе. Элемент <form> по большому счету просто является контейнером, внутри которого могут размещаться различные надписи, элементы управления и типы входных элементов, флажки, радио-кнопки, кнопки отправки и прочие HTML элементы, которые мы с Вами сейчас рассмотрим.

Основная задача формы заключается в том, чтобы принять от пользователя входящую информацию и передать её для дальнейшей обработки на стороне сервера.

Элемент имеет следующий синтаксис:

<form>
элементы формы
</form>

Элемент <input> является основным элементом формы и определяет пользовательское поле для ввода информации. Поле ввода принимает различный вид, в зависимости от значения атрибута type, применённого к данному элементу:

ЗначениеОписание
button
Определяет кнопку. Как правило, используется в основном совместно с языком программирования JavaScript для активации скрипта.
checkbox
включено
выключено		Элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ выключено. Элемент также называют флажок, флаговая кнопка, чекбокс, галочка.
color
Элемент управления для задания цвета (определяет палитру цветов).
date
Элемент управления для ввода даты в формате DD.MM.YYYY (день, месяц и год). В элементе не указывается время.
datetime-local
Элемент управления для ввода даты в формате DD.MM.YYYYThh:mm (день, месяц, год, часы и минуты). В элементе не указывается часовой пояс.
email
Определяет поле для ввода адреса электронной почты.
file
Элемент управления, который позволяет пользователю выбрать файл.
hidden
Элемент управления, который определяет скрытое поле ввода.
image
Элемент управления, который определяет графическую кнопку «отправить форму» (значение submit). По аналогии с тегом <img> вы должны использовать атрибут src, чтобы задать путь к изображению и атрибут alt, чтобы указать альтернативный текст, если изображение не будет загружено по каким-то причинам. Размеры изображения задаются атрибутами width (ширина) и height (высота).
month
Элемент управления для ввода месяца и года (Month YYYY). В элементе не указывается часовой пояс.
number
Элемент управления для ввода числа с плавающей точкой.
password
Определяет однострочное текстовое поле, предназначенное для ввода пароля (символы, введенные внутри поля скрываются). Используйте атрибут maxlength HTML тега <input>, чтобы задать максимальную длину значения, которое может быть введено в поле.
radio
выбрано
не выбрано		Элемент графического пользовательского интерфейса, который позволяет пользователю выбрать одно значение из предопределенной группы значений. Элемент, как правило, называют радиокнопка (radio button) или переключатель.
range
Элемент управления для ввода номера (регулятор), в котором ввод точного значения не является важным. Этот тип управления использует следующие значения по умолчанию, если атрибуты не указаны:
  • min = «0»
  • max = «100»
  • value = min + (max — min) / 2, или min (если max меньше чем min)
  • step = «1»
reset
Определяет кнопку сброса содержимого формы до значений, установленных по умолчанию.
search
Определяет однострочное текстовое поле для ввода строки поиска
submit
Определяет кнопку отправки формы
tel
Определяет элемент управления для ввода телефонного номера.
text
Определяет однострочное текстовое поле (по умолчанию имеет ширину в 20 символов).
Это значение по умолчанию.
time
Определяет элемент управления для ввода времени без указания часового пояса (hh:mm).
url
Определяет поле для ввода абсолютного URL-адреса.
week
Определяет элемент управления для ввода порядкого номера недели в году и самого года (Неделя NN, YYYY). В элементе не указывается часовой пояс.

С выходом HTML 5 к элементу <input> добавилось 12 новых типов (видов) полей, но к сожалению, пока не все из них имеют полную поддержку всеми передовыми браузерами. Как вы понимаете, к самым часто используемым видам полей относятся те, которые были введены задолго до HTML 5, например, такие как:

  • checkbox (флаговая кнопка).
  • radio (радиокнопка).
  • submit (кнопкa отправки формы).
  • text (однострочное текстовое поле).

Давайте рассмотрим пример использования этих элементов управления внутри формы:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML формы</title>
	</head>
	<body>
		<form>
			Имя: <input type = "text"  name = "firstname" value =  "Введите имя"> <br> <br>
			Фамилия: <input type = "text" name = "lastname" value =  "Введите фамилию"> <br> <br>
			Мужчина <input  type = "radio" name = "sex" value =  "male" checked>
			Женщина <input type = "radio" name = "sex" value =  "female"> <br> <br>
			О себе: <br>
			<input type = "checkbox" name = "type1" value = "low">Меньше 18<br>
			<input type = "checkbox" name = "type2" value = "2old">От 18 до 35<br>
			<input type = "checkbox" name = "type3" value = "high">Больше 35<br>
			<input type = "checkbox" name = "type4" value = "busy">Женат /-а<br>
			<input type = "checkbox" name = "type5" value = "cat">Есть кошка<br>
			<br>
			<input type = "submit" name = "submit" value = "отправить">
		</form>
	</body>
</html>

И так по порядку, что мы сделали в этом примере:

  • Разместили два однострочных текстовых поля (<input type = «text»>) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента <input> этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
  • Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.
    • Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае поле со значением male). Он применяется только для полей <input type = «checkbox»> и <input type = «radio»>, в противном случае он игнорируется.
  • Разместили пять флaговых кнопок (чекбоксов), которые позволяют пользователям указать необходимые параметры (выбрать необходимые значения). Присвоили этим полям уникальные имена атрибутом name и атрибутом value установили для этих полей необходимые значения.
  • Заключительный элемент, который мы разместили внутри формы это кнопка, которая служит для отправки формы (<input type = «submit»>). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name) и значение (атрибут value).

Результат нашего примера в браузере:

Рис 32 HTML формы.

Обращаю Ваше внимание, что в рамках изучения HTML мы не будем рассматривать то, как серверы обрабатывают входные данные, лишь рассмотрим базовые принципы передачи формы.

Обработчик формы это, как правило, обычная страница сервера, которая с помощью скрипта обрабатывает входные (полученные) данные. Чтобы указать обработчик формы, необходимо использовать тег <form> совместно с атрибутом action:
<form action = "example.php">

Обратите внимаение, что в атрибуте action указывается URL адрес того места, куда отправляется форма. Если для формы не задан атрибут action, то значением по умолчанию этого атрибута считается текущая страница (обработчик формы — текущая страница). В приведенном выше примере, предпологается, что скрипт обработки формы находится внутри страницы «example.php».

Расширение *.php используется для файлов, написанных на языке PHP (Hypertext Preprocessor — препроцессор гипертекста, произносится как «пи-эйч-пи») — скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов.

Еще одним важным атрибутом при работе с элементом <form> является атрибут method, он определяет метод HTTP (get или post), который используется при передаче формы:

<form action =  "example.php" method =  "get">
или:
<form  action = "example.php"  method = "post">

Вы можете использовать get (метод по умолчанию) если форма отправки является пассивной (как поисковой запрос) и не содержит конфиденциальной информации. При использовании метода get данные формы будут видны при передаче в адресе страницы:

http://www.kakoitosait.ru/example.php?firstname=Вася&lastname=Пупкин

Используйте метод post если форма использует обновление каких-либо данных, или включает в себя конфиденциальную информацию (например пароль). Метод post предлагает лучшую безопасность, так как представленные данные отправляются на сервер в теле сообщения запроса.

Группировка данных формы

Тег <fieldset> служит для визуальной группировки элементов, размещенных внутри формы (HTML тег <form>). Во всех основных браузерах, данный элемент выделяется рамкой, а содержимое элемента получает внутренние отступы со всех сторон.

Тег <legend> определяет заголовок для <fieldset> элемента, с помощью которого группируются элементы формы.

Пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Группировка данных формы</title>
	</head>
	<body>
		<form>
			<fieldset>
				<legend>Пожалуйста, представьтесь</legend>
				Имя: <input type =  "text" name = "firstname" value =  "Введите имя"> <br> <br>
				Фамилия: <input type =  "text" name = "lastname" value =  "Введите фамилию"> <br> <br>
				Мужчина <input type =  "radio" name = "sex" value =  "male" checked>
				Женщина <input type =  "radio" name = "sex" value =  "female"><br> <br>
				<input type = "submit" name = "submit" value = "отправить">
			</fieldset>
		</form>
	</body>
</html>

В этом примере мы:

  • Разместили внутри формы (парный тег <form>) элемент <fieldset>, благодаря которому мы группируем элементы формы, вокруг формы появляется рамка (внешний вид рамки может отличаться в зависимости от браузера). Тегом <legend> мы определяем для нашей рамки заголовок «Пожалуйста, представьтесь».
  • Разместили два однострочных текстовых поля (<input type = «text»>) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента <input> этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
  • Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.
  • Заключительный элемент это кнопка, которая служит для отправки формы (<input type = «submit»>). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name) и значение (атрибут value).

Результат нашего примера в браузере:

Рис 33 Группировка элементов формы.

Текстовая метка

Тег <label> (англ. — метка) служит текстовой меткой для элемента <input>. По своему виду метка ничем не отличается от обычного текста, но благодаря ей пользователь может выбрать элемент формы кликом по тексту, расположенному внутри элемента <label>, а не по самому элементу <input>.

Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега <label>. Значение атрибута for должно соответствовать значению глобального атрибута id того элемента формы, к которому будет относится метка. Атрибут for можно не использовать, если элемент <input> будет находиться внутри элемента <label>.

Рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <label></title>
	</head>
	<body>
		<form>
			<label for = "yes">Да</label> <!--Здесь мы создаём метку для тега input c id = "yes"-->
			<input type = "radio" id = "yes"name = "choice" value = "yes" checked> 
			<label for = "no">Нет</label><!--Здесь мы создаём метку для тега input c id = "no"-->
			<input type = "radio"id = "no" name = "choice" value = "no">
		</form><br>
		<form>
			<label>Да <input type = "radio" name = "choice2" value = "yes"> </label><!--Здесь мы  помещаем теги <input>
			внутрь тегов <label> (при этом атрибут for не требуется)-->
			<label>Нет <input type = "radio"name = "choice2" value = "no" checked></label> 
		</form> 
	</body>
</html>

В этом примере мы:

  • Внутри первой формы:
    • Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя, значения мы указали разные. Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes). Кроме того, мы указали для радиокнопок глобальные атрибуты id, которые определяют уникальный идентификатор для элемента.
    • Разместили два элемента <label>, которые определяют текстовые метки для наших текстовых полей. Обратите внимание, что мы использовали атрибут for, чтобы определить к какому элементу формы относится текущая метка. Значение атрибута for соответствует значению глобального атрибута id необходимой нам радиокнопки.
  • Внутри второй формы:
    • Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Для второй радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.
    • Разместили два элемента <label>, внутри них мы разместили наши радиокнопки. В отличии от предыдущего метода отсутствует необходимость указывать для радиокнопок глобальные атрибуты id (идентификатор для элемента), а для текстовых меток использовать атрибут for, чтобы на них сослаться (сделать привязку).

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

Рис. 34 Использование текстовой метки (тег <label>).

Подсказка для полей ввода

Атрибут placeholder (HTML тега <input>) указывает подсказку, которая описывает ожидаемое значение для ввода в элемент. Подсказка отображается в поле ввода до того, как пользователь вводит значение.

Обратите внимание на то, что браузер Internet Explorer имеет поддержку данного атрибута только с 10-ой версии, в некоторых случаях вы можете использовать атрибут value в качестве подсказки для поддержки более ранних версий этого браузера (пример мы рассматривали выше).

Атрибут может быть использован с полями данных следующих типов (атрибут type):

  • email (поле для адреса электронной почты).
  • password (поле с паролем, в котором скрываются символы).
  • search (текстовое поле для ввода строки поиска).
  • text (однострочное текстовое поле).
  • tel (поле для ввода номера телефона).
  • url (поле для ввода URL-адреса).

Давайте рассмотри пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута placeholder</title>
	</head>
	<body>
		<form>
			Login: <input type = "text"  name = "login" placeholder = "Введите ваш логин"><br><br>
			Password: <input type = "password"  name = "password" placeholder = "Введите ваш пароль"><br>
			<button type = "submit">Далее</button>
		</form>
	</body>
</html>

В данном примере мы указали для элемента <input> с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода.

Результат нашего примера:

Рис. 34а Атрибут placeholder HTML тега <input> (создание текстовой подсказки).

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Используя полученные знания составьте следующую форму оформления заказа:

Практическое задание № 22.

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

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


basicweb.ru

Примеры web-страниц на HTML — Учитель программирования.ру

Основные тегиТекстСсылкиФреймыТаблицыСпискиФормыИзображения

Пример 1. Структура документа HTML

<HTML>
<HEAD>
<TITLE>Название документа</TITLE>
</HEAD>
<BODY bgcolor=”teal” text=”aqua”>
Здесь расположен сам Web-документ.
<CENTER><h2><font color=”yellow”>Всем привет!</h2></CENTER></font><P>
<CENTER><font color=”red” size=4>Здравствуй, мир!</CENTER></font>
</BODY>
</HTML>

Пример 2. Структура простейших веб-страниц


<HTML>
<HEAD>
<TITLE>Поисковые системы Internet.</TITLE>
</HEAD><BODY bgcolor=”navy” text=”yellow”>
<big><i><U>Поисковые системы в Интернете</i></big></U></CENTER>
<hr color=”aqua”>
<font color=”white”>Ниже приведены некоторые популярные зарубежные
поисковые системы и отечественная система Rambler. Для поиска
информации используется окно Search, в которое вводится ключевое
слово и нажимается кнопка Search.<br></font>
Просмотрите примеры:
<a href=”altavist.HTM”>ALTAVIST.HTM</a>,
<a href=”EXCITE.HTM”>EXCITE.HTM</a>,
<a href=”YAHOO.HTM”>YAHOO.HTM</a>!
<hr color=”red”>
1.<IMG SRC=”altavist.gif”>
2.<IMG SRC=”yahoo.gif”>
3.<IMG SRC=”excite.gif”>
4.<IMG SRC=”lycos.gif”><P>
5.<IMG SRC=”infoseek.gif”>
6.<IMG SRC=”rambler.gif”><hr color=”lime”>
<tt><big><U><font color=”aqua”>Используйте поисковые системы для
поиска информации в Интернете!</tt></big></U></font>
</BODY>
</HTML>

Пример 3. Разметка веб-страницы


<HTML>
<HEAD>
<TITLE>Эхо Москвы.</TITLE>
</HEAD>
<BODY bgcolor=”purple” text=”lime” link=”yellow”>
<CENTER><u><font color=”yellow”>24 часа в сутки!</u></font><br>
Информация на любые темы!
<font color=”aqua”>Частота на УКВ 73,82 МГц или 91,2 МГц FM.<p></font>
<IMG SRC=”echomsk.gif” width=”403″ height=”263″><p>
<i><big><font color=”white”>Слушайте Эхо Москвы!
Остальное видимость!<br></i></big></font>
Адрес в Интернете:
<a href=”http://www.echo.msk.ru”>http://www.echo.msk.ru</a></CENTER>
</BODY>
</HTML>

Пример 4. Простой пример на HTML

<HTML>
<HEAD>
<TITLE>Упорядоченные и неупорядоченные списки</TITLE>
</HEAD>
<BODY BGCOLOR=”navy” text=”yellow”>
<h4><U>Неупорядоченный список</h4></U>
<UL>
<LI>Элемент 1.
<LI>Элемент 2.
<LI>Элемент 3.
</UL>
<HR color=”lime”>
<h4><U>Упорядоченный нумерованный список</h4></U>
<OL>
<LI>Элемент 1.
<LI>Элемент 2.
<LI>Элемент 3.
</OL>
</BODY>
</HTML>

”Пример



Списки определений


Списки определений имеют вид:

Название термина 1
Определение термина 1
Другое определение термина 1
Название термина 2
Определение термина 2
Другое определение термина 2
Название термина 3
Определение термина 3
Другое определение термина 3



Петров И.C., E-mail: [email protected]



”Пример

<HTML>
<HEAD>
<TITLE>Формы</TITLE></HEAD>
<BASE>
<BODY bgcolor=”silver”>
<FORM>
<CENTER><FONT size=6>Элементы диалога</font></center>
<HR color=”blue”>
<Н2>Элемент ISINDEX</h3>
<ISINDEX prompt=”Cтpoкa для ввода критерия поиска”>
<HR color=”blue”>
<Н2>Элементы INPUT</h3>
<h4> Ввод текстовой строки </h4>
<INPUT type=”text” size=50>
<h4> Ввод пароля </h4>
<INPUT type=”password”>
<h4> Флажки </h4>
<INPUT type=”checkbox” name=”F001″ checked>
<INPUT type=”checkbox” name=”F001″ checked>
<h4> Переключатели </h4>
<INPUT type=”radio” name=”S001″ vаluе=”Первый”>
<INPUT type=”radio” name=”S001″ value=”Второй”>
<INPUT type=”radio” name=”S001″ value=”Третий” checked>
<h4> Кнопка подтверждения ввода </h4>
<INPUT type=”submit” value=”Подтверждение”>
<h4> Кнопка с изображением </h4>
<INPUT type=”image” src=”lycos.gif”>
<h4> Кнопка очистки формы </h4>
<INPUT type=”reset” value=”0чистка”>
<h4> Файл </h4>
<INPUT type=”file” name=”photo” accept=”image/*”>
<HR color=”blue”>
<Н2>Элемент SELECT
<SELECT multiple>
<OPTION value=а>Первый
<OPTION value=Ь>Второй
<OPTION value=с>Третий
<OPTION value=d>Четвертый
</select></h3>
<HR color=”blue”>
<Н2>Элемент TEXTAREA
<TEXTAREA rows=5 cols=30>
Область для ввода текста
</textarea></h3>
<HR color=”blue”>
</FORM>
</BODY>
</HTML>

”Пример

<html>
<frameset cols=”33%,33%,*” frameborder=”2″>
<frame name=”one” src=”1.htm” frameborder=”2″ scrolling=”yes”>
<frame name=”two” src=”2.htm” frameborder=”2″ scrolling=”yes”>
<frame name=”three” src=”3.htm” frameborder=”2″ scrolling=”yes”>
<noframes> </noframes> </frameset>
</html>

”Пример

<html>
<frameset rows=”33%,33%,*” frameborder=”2″>
<frame name=”one” src=”1.htm” frameborder=”2″ scrolling=”yes”>
<frame name=”two” src=”2.htm” frameborder=”2″ scrolling=”yes”>
<frame name=”three” src=”3.htm” frameborder=”2″ scrolling=”yes”>
<noframes>
<!– For browsers that don’t support frames –>
</noframes>
</frameset>
</html>

”Пример

<html>
<frameset cols=”50%,*”, rows=”50%,*” frameborder=”2″>
<frame name=”one” src=”1.htm” frameborder=”2″ scrolling=”yes”>
<frame name=”two” src=”2.htm” frameborder=”2″ scrolling=”yes”>
<frame name=”three” src=”3.htm” frameborder=”2″ scrolling=”yes”>
<frame name=”four” src=”4.htm” frameborder=”2″ scrolling=”yes”>
<noframes>
</noframes>
</frameset>
</html>

”Пример

<meta http-equiv=”refresh” content=”3; url=http://www.tigir.com”>

[spoiler title=”Пример 1. Вывод текста”]

Этот текст написан полужирным шрифтом.
Этот текст логически выделен тегом strong (может отображаться как обычный текст в некоторых браузерах или отображаться полужирным шрифтом). В некоторых браузерах действие аналогично действию тега b.
Этот текст отображается более крупным шрифтом (может отображаться обычным шрифтом в некоторых браузерах)
Этот текст логически выделен тегом em. В некоторых браузерах действие аналогично действию тега i.
Этот текст отображается курсивом.
Этот текст отображается более маленьким шрифтом.
Этот текст ниже , а этот выше уровня основного текста.


[/spoiler] [spoiler title=”Пример 2. Форматирование текста”]

<html>
<body>
<pre>
Это предварительно
отформатированный текст.
В нем сохраняются
все пробелы и пустые
строки, которые вы указали.
</pre>
<p>Тег pre хорошо использовать для отображения компьютерного кода.:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
[/spoiler] [spoiler title=”Пример 3. Вывод программного кода”] <html>
<body>
<code>Тег code предназначен для отображения одной или нескольких строк текста, который представляет собой программный код. Сюда относятся имена переменных, ключевые слова, тексты функции и т.д. Браузеры обычно отображают содержимое контейнера code как моноширинный текст уменьшенного размера.</code>
<br>
<kbd>Тег kbd используется для обозначения текста, который набирается на клавиатуре или для названия клавиш. Браузеры обычно помечают текст в контейнере kbd моноширинным шрифтом.</kbd>
<br>
<tt>Текст, отмеченный тегом tt отображаетя моноширинным текстом. Этот тег относится к группе тегов физического форматирования.</tt>
<br>
<samp>Тег samp используется для отображения текста, который является результатом вывода компьютерной программы или скрипта. Браузеры обычно отображают текст в контейнере samp с помощью моноширинного шрифта. С помощью стилей можно задать свое собственное оформление.</samp>
<br>
<var>Тег var используется для выделения переменных компьютерных программ. Браузеры обычно помечают текст в контейнере var курсивным начертанием.</var>
</body>
</html>
[/spoiler] [spoiler title=”Пример 4. Текст адреса”] <html>
<body>
<address>
Дональд Дак<br>
почтовый ящик 555<br>
Диснейленд<br>
США
</address>
</body>
</html>
[/spoiler] [spoiler title=”Пример 5. Аббревиатуры”] <html>
<body>
<abbr title=”United Nations”>UN</abbr>
<br />
<acronym title=”World Wide Web”>WWW</acronym>
<p>Атрибут title используется для отображения текста, содержащегося в нем, при наведении курсора мыши на акроним или аббревиатуру.</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 6. Цитаты”] <html>
<body>
Блок цитаты:
<blockquote>
Это длинная цитата. Это длинная цитата. Это длинная цитата. Это длинная цитата.
</blockquote>
<p><b>Браузер вставляет пустую строчку и отступы перед и после блока цитаты.</b></p>
Короткая цитата:
<q>Это короткая цитата</q>
<p><b>Элемент q никак не выделяется и отображается как обычный текст.</b></p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 7. Зачёркивание и подчёркивание”] <html>
<body>
<p>
Дюжина — это
<del>тринадцать</del>
<ins>двенадцать</ins>
единиц.
</p>
<p>
Большая часть браузеров перечеркивают удаленный текст и подчеркивают вставленный текст.
</p>
<p>
Старые браузеры могут отображать удаленный текст как простой текст.
</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 8. Параграфы”] <html>
<body>
<abbr title=”United Nations”>UN</abbr>
<p>Это параграф.</p>
<p>Это другой параграф.</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 9. Написание степеней и формул”] <html>
<head>
<title>Форматированиеhtml</title>
</head>
<body>
y=x<sup>2</sup>-уравнениепараболы.<br><br>
H<sub>2</sub>O-формулаводы.
</body>
</html>
[/spoiler] [spoiler title=”Пример 10. Заголовки”] <html>
<head>
<title>Форматированиеhtml</title>
</head>
<body>
<h2>Это заголовок первого уровня</h2>
<h3>Это заголовок второго уровня</h3>
<h4>Это заголовок третьего уровня</h4>
<h5″>Это заголовок четвертого уровня</h5>
<h5″>Это заголовок пятого уровня</h5>
<h6″>Это заголовок шестого уровня</h6>
Это просто текст
</body>
</html>
[/spoiler]

[spoiler title=”Пример 1. Ссылка”]



Этот текст является ссылкой на примеры html.



А этот текст приведет вас на известный видеохостинг Youtube.



[/spoiler] [spoiler title=”Пример 2. Ссылка в изображении”]


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






[/spoiler] [spoiler title=”Пример 3. Открытие ссылки в новой вкладке”]

К примерам html

Если вы укажете атрибуту target значение “_blank”, ссылка откроется в новом окне браузера.



[/spoiler] [spoiler title=”Пример 4. Ссылка для отправки почты”]


Это ссылка на отправку почты:
[email protected]?subject=Привет%20тебе”>
Отправить письмо!


Внимание: Пробелы между словами должны быть заменены знаком «%20» , чтобы вы были уверены, что браузер будет правильно отображать ваш текст.



[/spoiler]

[spoiler title=”Пример 1. Несколько вертикальных фреймов”] <html>
<frameset cols=”25%,50%,25%”>
<frame src=”frame1.html”>
<frame src=”frame2.html”>
<frame src=”frame3.html”>
</frameset>
</html>
[/spoiler] [spoiler title=”Пример 2. Несколько горизонтальных фреймов”] <html>
<frameset rows=”25%,50%,25%”>
<frame src=”frame1.html”>
<frame src=”frame2.html”>
<frame src=”frame3.html”>
</frameset>
</html>
[/spoiler] [spoiler title=”Пример 3. Навигация по фреймам”] <html>
<frameset cols=”120,*”>
<frame src=”frame_contents.html”>
<frame src=”frame1.html”
name=”showframe”>
</frameset>
</html>
[/spoiler] [spoiler title=”Пример 4. Iframe – построчные фреймы”] <html>
<body>
<iframe src=”examples_main.html”></iframe>
<p>Некоторые старые браузеры не поддерживают строчные фреймы.</p>
<p>В этом случае строчный фрейм не будет отображен в окне браузера.</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 5. Переход к месту во фрейме”] <html>
<frameset cols=”20%,80%”>
<frame src=”frame1.html”>
<frame src=”frame4.html#C10″>
</frameset>
</html>
[/spoiler]

[spoiler title=”Пример 1. Простая таблица”] <html>
<body>
<p>
Каждая таблица начинается с тега table.
Каждая строчка таблицы начинается с тега tr.
Каждая ячейка таблицы начинается с тега td.
</p>
<h5>Таблица из одной колонки:</h5>
<table border=”1″>
<tr>
<td>100</td>
</tr>
</table>
<h5>Одна строчка из трех колонок:</h5>
<table border=”1″>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h5>Две строчки по три колонки:</h5>
<table border=”1″>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
[/spoiler] [spoiler title=”Пример 2. Рамки таблицы”] <html>
<body>
<h5>Таблица с обычной рамкой:</h5>
<table border=”1″>
<tr>
<td>Первая</td>
<td>строчка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строчка</td>
</tr>
</table>
<h5>С широкой рамкой:</h5>
<table border=”8″>
<tr>
<td>Первая</td>
<td>строчка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строчка</td>
</tr>
</table>
<h5>С очень широкой рамкой:</h5>
<table border=”15″>
<tr>
<td>Первая</td>
<td>строчка</td>
</tr>
<tr>
<td>Вторая</td>
<td>строчка</td>
</tr>
</table>
</body>
</html>
[/spoiler] [spoiler title=”Пример 3. Заголовки таблицы”] <html>
<body>
<h5>Заголовки таблицы:</h5>
<table border=”1″>
<tr>
<th>Имя</th>
<th>Телефон</th>
<th>Телефон</th>
</tr>
<tr>
<td>Билл Гейтс</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h5>Вертикальные заголовки:</h5>
<table border=”1″>
<tr>
<th>Имя:</th>
<td>Билл Гейтс</td>
</tr>
<tr>
<th>Телефон:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Телефон:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
[/spoiler] [spoiler title=”Пример 4. Таблица с заголовком”] <html>
<body>
<h5>
Эта таблица с широкой рамкой и названием
</h5>
<table border=”6″>
<caption>Название</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
[/spoiler] [spoiler title=”Пример 5. Ячейки на несколько колонок”] <html>
<body>
<h5>Ячейки состоит из двух колонок:</h5>
<table border=”1″>
<tr>
<th>Имя</th>
<th colspan=”2″>Телефон</th>
</tr>
<tr>
<td>Билл Гейтс</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h5>Ячейка состоит из двух строк:</h5>
<table border=”1″>
<tr>
<th>Имя:</th>
<td>Билл Гейтс</td>
</tr>
<tr>
<th rowspan=”2″>Телефон:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
[/spoiler]

[spoiler title=”Пример 1. Простой список”] <html>
<body>
<h5>Неупорядоченный список:</h5>
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
</body>
</html>
[/spoiler] [spoiler title=”Пример 2. Упорядоченный список”] <html>
<body>
<h5>Упорядоченный список:</h5>
<ol>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>
</body>
</html>
[/spoiler] [spoiler title=”Пример 3. Разные виды списков”] <html>
<body>
<h5>Значки списка в виде закрашенного круга:</h5>
<ul type=”disc”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ul>
<h5>Значки списка в виде незакрашенного кругаCircle bullets list:</h5>
<ul type=”circle”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ul>
<h5>Значки списка в виде закрашенного квадрата:</h5>
<ul type=”square”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ul>
</body>
</html>
[/spoiler] [spoiler title=”Пример 4. Разные виды упорядоченных списков”] <html>
<body>
<h5>Нумерованный список:</h5>
<ol>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ol>
<h5>Нумерация заглавными буквами:</h5>
<ol type=”A”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ol>
<h5>Нумерация строчными буквами:</h5>
<ol type=”a”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ol>
<h5>Нумерация заглавными римскими цифрами:</h5>
<ol type=”I”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ol>
<h5>Нумерация строчными римскими цифрами:</h5>
<ol type=”i”>
<li>Яблоки</li>
<li>Бананы</li>
<li>Лимоны</li>
<li>Апельсины</li>
</ol>
</body>
</html>
[/spoiler] [spoiler title=”Пример 5. Вложенные списки”] <html>
<body>
<h5>Вложенный список:</h5>
<ul>
<li>Кофе</li>
<li>Чай
<ul>
<li>Черный чай</li>
<li>Зеленый чай</li>
</ul>
</li>
<li>Молоко</li>
</ul>
</body>
</html>
[/spoiler]

[spoiler title=”Пример 1. Форма полей ввода”] <html>
<body>
<form action=””>
Имя:
<input type=”text” name=”firstname”>
<br>
Фамилия:
<input type=”text” name=”lastname”>
</form>
</body>
</html>
[/spoiler] [spoiler title=”Пример 2. Форма ввода пароля”] <html>
<body>
<form action=””>
Имя пользователя (логин):
<input type=”text” name=”user”>
<br>
Пароль:
<input type=”password” name=”password”>
</form>
<p>
Помните, что когда вы вводите пароль, браузер показывает звездочки вместо символов.
</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 3. Переключатель”] <html>
<body>
<form action=””>
Мужчина:
<input type=”radio” checked=”checked”
name=”Sex” value=”male”>
<br>
Женщина:
<input type=”radio”
name=”Sex” value=”female”>
</form>
<p>
Пользователь может выбрать только одно значение.
</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 4. Выпадающий список”] <html>
<body>
<form action=””>
<select name=”cars”>
<option value=”volvo”>Вольво</option>
<option value=”saab”>Сааб</option>
<option value=”fiat”>Фиат</option>
<option value=”audi”>Ауди</option>
</select>
</form>
</body>
</html>
[/spoiler] [spoiler title=”Пример 5. Поля ввода”] <html>
<body>
<form action=””>
<input type=”button” value=”Всем привет!”>
</form>
</body>
</html>
[/spoiler] [spoiler title=”Пример 6. Множественный переключатель и кнопка подтверждения”] <html>
<body>
<form name=”input” action=”html1.asp” method=”get”>
У меня есть мотоцикл:
<input type=”checkbox” name=”vehicle” value=”Bike” checked=”checked” />
<br />
У меня есть машина:
<input type=”checkbox” name=”vehicle” value=”Car” />
<br />
У меня есть аэроплан:
<input type=”checkbox” name=”vehicle” value=”Airplane” />
<br /><br />
<input type=”submit” value=”Подтвердить” />
</form>
<p>
Если вы нажмете на кпопку «Подвердить», вы отправите ваши данные на новую страницу, которая называется html1.asp.
</p>
</body>
</html>
[/spoiler]

[spoiler title=”Пример 1. Вывод изображений”] <html>
<body>
<p>
Вставка простого изображения:
<img src=”skype.jpeg”
width=”111″ height=”111″>
</p>
<p>
Двигающееся изображение (анимация):
<img src=”sun.gif”
width=”62″ height=”62″>
</p>
<p>
Помните, что синтаксис вставки анимации ничем не отличается от синтаксиса вставки простого изображения.
</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 2. Фоновые изображения”] <html>
<body background=”skype.jpeg”>
<h3>Взгляните, мы вставили изображение, как фон!</h3>
<p>Можно вставлять изображения форматов gif, jpg/jpeg и png.</p>
<p>Если размеры изображения меньше страницы, оно будет повторяться пока не заполнит весь фон.</p>
</body>
</html>
[/spoiler] [spoiler title=”Пример 3. Всплывание изображений”] <html>
<body>
<p>
<img src =”skype.jpeg”
align =”left” width=”48″ height=”48″>
Параграф с изображением. Атрибуту «align» присвоено значение «left». Изображение «всплывает» влево по отношению к тексту.
</p><br /><br />
<p>
<img src =”skype.jpeg”
align =”right” width=”48″ height=”48″>
Параграф с изображением. Атрибуту «align» присвоено значение «right». Изображение «всплывает» вправо по отношению к тексту.
</p><br /><br />
</body>
</html>
[/spoiler] [spoiler title=”Пример 4. Изменения размера изображений”] <html>
<body>
<p>
<img src=”skype.jpeg”
width=”20″ height=”20″>
</p>
<p>
<img src=”skype.jpeg”
width=”45″ height=”45″>
</p>
<p>
<img src=”skype.jpeg”
width=”70″ height=”70″>
</p>
<p>
Вы можете изменять размер изображения, меняя значения атрибутов «height» (ширина) и «width» (высота) тега img.
</p>
</body>
</html>
[/spoiler]

uchitel-program.ru

Примеры HTML // Вебшкола онлайн



Примеры использования основных тегов HTML

Простой html-документ
Отображение текста в параграфах
Еще примеры с параграфами
Переход на новую строку(тег br)
Проблемы со стихами(трудности html-форматирования)
Заголовки
Заголовки, выровненные по центру
Горизонтальная линия
Комментарии в html-коде
Изменение цвета фона

Форматирование текста в HTML

Форматирование текста
Предварительно отформатированный текст
Теги для отображения программного кода
Вставка адреса
Аббревиатуры и акронимы
Направление написания текста
Длинные и короткие цитаты
Удаленный и вставленный текст

Ссылки

Вставка ссылки
Изображение как ссылка
Открытие ссылки в новом окне браузера
Переход в другое место (в открытом документе)
Отмена фреймов
Ссылка на отправку почты (mailto)
Еще один вид ссылки на почту

Фреймы

Вертикальный фрейм из 3-х документов
Горизонтальный фрейм из 3-х документов
Использование тега <noframes>
Фрейм из колонок и строк
Использование атрибута noresize
Фрейм-навигация
Строчный фрейм (фрейм в html-документе)
Переход к определенному месту документа
Переход к определенному месту документа с помощью фрейма-навигации

Таблицы

Простая таблица
Виды рамок таблицы
Таблица без рамок
Заголовки в таблице
Пустые ячейки таблицы
Название таблицы
Ячейки из нескольких колонок/строк
Теги в таблице
Cell padding (отступ между контентом и рамкой таблицы)
Cell spacing (отступ между ячейками таблицы)
Фон таблицы
Фон ячейки таблицы
Выравнивание содержимого ячейки
Атрибут frame
Атрибуты frame и border

Списки

Неупорядоченный список
Упорядоченный список
Виды неупорядоченных списков
Виды упорядоченных списков
Вложенный список
Вложенный список 2
Список определений

Формы и ввод информации пользователем

Создание полей ввода
Создание поля ввода пароля
Множественный выбор (checkbox)
Переключатель (radiobutton)
Простой выпадающий список выбора
Выпадающий список с выбранным значением
Поле ввода текста
Создание кнопки
Поля ввода данных с рамкой и названием
Поле ввода с кнопкой подтверждения
Множественный выбор и кнопка подтверждения
Переключатель и кнопка подтверждения
Отправка e-mail с помощью формы

Изображения

Вставка изображения
Вставка изображения из нелокальных источников
Фоновое изображение
Выравнивание изображения относительно текста
«Всплывание» изображения вправо/влево относительно текста
Изменение размера изображения
Альтернативный текст (используется при ошибке загрузки изображения)
Изображение как ссылка
Карта изображения

Фон (фоновое изображение)

Удачное сочетание фона и текста
Неудачное сочетание фона и текста
Удачное фоновое изображение 1
Удачное фоновое изображение 2
Неудачное фоновое изображение

Стили

Стиль в разделе <HEAD> документа
Ссылки без подчеркивания
Ссылка на внешний файл стиля

Раздел <head>

Изменение заголовка страницы
Атрибут target для всех ссылок на странице.

Раздел <meta>

Описание документа
Ключевые слова документа
Перенаправление пользователя на другой URL

Скрипты

Вставка скрипта
Использование тега <noscript>

weblabla.ru

Как сделать форму в HTML для сайта

Рассматривая основыные теги HTML мы не можем не затронуть такой важный элемент как формы. Часто  на web-страницах необходима обратная связь. Например, заполнение анкеты на сайте, регистрация, авторизация, комментарии и т.д. Во всех этих случаях пользователь заполняет специальные области (поля формы) на странице, после чего происходит отправка данных на сервер. Для создания обратной связи используются формы. Форма это фрагмент HTML документа предназначенный для ввода информации пользователем.

На рисунке представлена форма регистрации студента на сайте образовательного учреждения.

forma-html

Для создания формы используется контейнер <form></form> с атрибутом action, в котором указывается страница на сервере, которая будет обрабатывать данные переданные формой.

Структура простейшей формы:

<formaction="адрес страницы обработчика формы">
элементы форм…
</form>

В каждой форме необходимо также наличие кнопки submit, предназначенной для отправки данных после заполнения формы.

Структура кнопки:

<input type="submit" name="имя кнопки" value="отображаемое имя">

Итак, для записи практически всех элементов форм используется тэг <input> с атрибутом type. Для создания кнопки, которая сбрасывать все данные с форм используется следующая структура:

<input type="reset" name="имя кнопки" value="отображаемое имя">

Для создания текстового поля (textfield) существует параметр text. При этом используются параметры: name – имя поля; size – для поля в симолах; maxlength – максимально возможное количество символов в поле; value – информация, отображаемая в форме по умолчанию

Пример записи формы с двумя текстовыми полями:

<form action="obrabotka.php">
Введитеимя:<br>
<input type="text" name="name" size=”15” maxlength=”20” value="" ><br>
Введите фамилию:<br>
<input type="text" name="surname" size=”20” maxlength=”25” value="" ><br>
<input type="submit" name="otpravit" value="Отправить">
<input type="reset" name="ochistit" value="Очистить">
</form>

Результат работы формы представлен на рисунке.

forma-html-primer.jpg

В случае, если в текстовое поле необходимо ввести большое количество информации, например, комментарий используется форма текстовой области (textarea),которая создается при помощи тэга <textarea> со следующими атрибутами: name – имя области; cols – количество столбцов области; rows – количество строк; wrap – способ переноса сток (on – переносить строки, off – не переносить строки).

К вышеуказанному коду добавим поле текстовой области:

Комментарий:<br><textarea name="area" cols=”25” rows=”5” wrap=”on”></textarea>

Результат работы кода с текстовой областью представлен на рисунке.

forma-s-textarea

Следующим элементом форм являются списки, позволяющие сделать выбор из представленного множества значений. Создать форму списка позволяют тэги <option> с параметром value, отвечающем за значение элемента и <select> с параметрами name, в котором указывается имя списка, size, отвечающего за число видимых элементов.

Структура записи списка:

<select name="имя списка" size="число видимых элементов"><
 <option value="значениеэлемента">текст</option>
 <option value="значение элемента">текст</option>
 </select>

Для того, чтобы элемент был выделен при загрузке страницы необходимо в тэге <option> дописать атрибут selected. Различные возможности построения элемента списка и его код представлены на рисунке.

teg-select-v-forme

Аналогичным способом выбора являются элементы формы флажок (checkbox) и радиокнопка (radiobutton). Отличие этих элементов состоит в том, что флажок позволяет сделать множественный выбор, а радиокнопка только единичный.

Структура записи флажка и радиокнопки:

Флажок:

<input type="checkbox" name="имя флажка" value="значение">текст

Радиокнопка:

<input type="radio" name="имя радиокнопки" value="значение"> текст

В указанных в структуре элементах для выделения флажка и радиокнопки по умолчанию используется атрибут checked. Пример использования флажка, радиокнопки, а также HTML код представлены на рисунке.

forma-checj-box

Еще одним элементом формы является кнопка, задаваемая при помощи атрибута typeтэга <input> со значением button:

<input type=»button» name=»имя кнопки» value=»значение»>

В указанном коде для создания кнопки присутствует параметр onclick, в котором как правило задается код на языке программирования для выполнения того или иного действия при нажатии на эту кнопку:

<input type=»button» name=»подсказка» value=»Помощь»></button>

Для вывода сообщения в специальном окне используется команда на языке jаvascript – aler. Результат работы примера представлен на рисунке.

podskazka

Для вставки изображения в кнопку используется код, представленный в следующем примере:

<input type="button" name="подсказка"><img src=”изображение.jpg”></button>

При регистрации и входе на сайты используется поле со скрытым тестом, отображаемым в виде звездочек. Это элемент формы password:

<input type="password" name="pass" size=”длинаполя” maxlength=”максимально возможная длина пароля” value="значение по умолчанию" >

forma-parol

Часто регистрация на сайте разбивается на несколько страниц и каждая последующая должна содержать в себе информацию из предыдущей. Для того чтобы скрыть передаваемую информацию используется элемент формы hidden:

<inputtype="hidden" value="значение по умолчанию">

Элемент формы hiddenбудет невидим в окне браузера.

Для загрузки файлов на сервер в формах имеется элемент file. Пример кода для загрузки файлов на сервер представлен ниже:

<input type=”file” size=”длинаполя”>

Итак, в этой теме были рассмотрены элементы форм для создания различных HTMLстраниц, которые вместе с обработчиками сценария на компьютере или сервере позволяют разрабатывать полноценные web-приложения.

Визуальное оформление HTML формы. Bootstrap

webriz.ru

HTML Макеты

В издательском деле многостолбцовый вывод контента известен уже много лет — узкие столбцы упрощают чтение текста. С переходом на широкоэкранные дисплеи веб-разработчики начали искать способы сохранения комфортной ширины столбцов в своих блогах и сайтах. За последнее десятилетие появился ряд довольно остроумных решений в дизайне многих веб­страниц по созданию многоколоночных макетов. Существуют различные способы создания макетов в HTML.

Макеты на основе таблиц

В недалеком прошлом таблицы были самым простым и самым популярным способом создания многоколоночных макетов в HTML. Вся веб-страница помещалась внутри большой таблицы (<table>). Однако элемент <table> разработан не для создания макетов страниц, его цель — отображение табличных данных.
Следующий макет создается с помощью таблицы, состоящей из 3-х строк и 2 столбцов, где строки содержащие контент заголовка и футера охватывают обе колонки, используя атрибут colspan:

Пример: Макет на основе таблицы

Макет на основе таблицы
Основной контент…
<!DOCTYPE html>
<html>
<head>
<title>Макет на основе таблицы</title>
    <style>
        table {
            width: 100%;
            border: 0;
        }
        td.header {
            background-color: #b5dcb3;
        }
        td.sidebar {
            background-color: #dddddd;
            width: 30%;
            vertical-align: top;
            padding:5px;
        }
        td.sidebar>ul {
            list-style: none;
            padding:5px;
        }
        td.article {
            background-color: #eeeeee;
            height: 200px;
            width: 70%;
            vertical-align: top;
            padding:5px;
        }
        td.footer {
            background-color: #b5dcb3;
            text-align: center;
            padding:5px;
        }
    </style>
</head>
<body>
  <table border="0">
    <tr>
      <td colspan="2"><h2>Шапка сайта</h2></td>
    </tr>
    <tr>
      <td>
        <b>Главное меню</b>
            <ul>
                <li>HTML Элементы</li>
                <li>HTML Атрибуты</li>
                <li>HTML Таблицы</li>
                <li>...</li>
            </ul>
      </td>
      <td>Основной контент...</td>
    </tr>
    <tr>
      <td colspan="2">Copyright © 2017 wm-school.ru</td>
    </tr>
  </table>
</body>
</html>
Совет: Не используйте таблицы для разметки страницы! W3C осуждает использование таблиц для разметки.

Макеты на основе DIV-элементов

В течение долгого времени веб-дизайнеры используют элементы <div> для группировки элементов на странице (например, оформирующих шапку сайта, статьи, футер или боковую панель). Таким образом разработчики, как правило, помещают эти основные разделы страницы внутри элементов <div> и используют атрибуты class или id, чтобы указать назначение конкретной части страницы.

Ниже приведена визуализация макета с использованием тегов <div> для группировки элементов на странице:

<div=»header»>

<div>

<div>

<div>

Пример: Макет на основе DIV-элементов

Главное меню
  • HTML Элементы
  • HTML Атрибуты
  • HTML Таблицы
  • …
Основной контент…
Copyright © 2017 wm-school.ru
<!DOCTYPE html>
<html>
<head>
<style>
#page {
    width: 100%;
}
#header {
    background-color:#808000;
}
#sidebar>ul {
    list-style: none;
    padding:5px;
}
#sidebar {
    background-color:#dddddd;
    height:200px;
    width:30%;
    float:left;
    padding:5px;        
}
#content {
    background-color:#eeeeee;
    height:200px;
    width:70%;
    float:left;
    padding:5px;    
}
#footer {
    background-color:#808000;
    clear:both;
    text-align:center;
    padding:5px;    
}
</style>
</head>
<body>

<div>
<div>
<h2>Шапка сайта</h2>
</div>

<div>
<b>Главное меню</b>
<ul>
  <li>HTML Элементы</li>
  <li>HTML Атрибуты</li>
  <li>HTML Таблицы</li>
  <li>...</li>
</ul>
</div>

<div>
<p>Основной контент...</p>
</div>

<div>
Copyright © 2017 wm-school.ru
</div>
</div>

</body>
</html>

Новые элементы макета в HTML5

Спецификация HTML5 предоставляет новые семантические теги, описывающие содержащийся в них контент. Так как современные сайты включают в свои страницы боковые панели, заголовки и секции, в спецификацию HTML5 были включены новые теги, предназначенные для деления страницы на логические области. Семантическая разметка предназначена для описания контента. Семантическая разметка упрощает понимание смысла и контекста информации, размещенной на странице — как для поисковиков, так и для разработчиков. Теперь программы экранного доступа могут позволить пользователям проигнорировать заголовки и нижние колонтитулы и сразу перейти к основному контенту. Кроме того, поисковые машины могут придать большее значение содержимому элементов <article>, чем содержимому <header> или <footer>.

Новые элементы разметки в HTML5

ЭлементЗначение / описание
<header>Определение заголовка страницы или раздела.
<nav>Определение области навигации страницы или раздела.
<section>Определение логической области страницы или группировка контента.
<article>Определение статьи (логически завершенного блока контента).
<aside>Определение вторичного или связанного контента.
<footer>Определение завершителя страницы или раздела.
<details>Определяет дополнительные детали.
<summary>Определяет заголовок для элемента <details>.
Следующий пример имеет такую же структуру, как рассмотренный пример с применением тегов <div>. Однако многие из элементов <div> в нем заменены новыми элементами HTML5. Например заголовок помещен внутри элемента <header>, меню навигации — в элементе <nav>, а статьи — в отдельных элементах <article>.

Ниже приведена визуализация макета с использованием тегов HTML5 для раметки страницы:

<header>

<nav>

<section>

<footer>

Пример: Макет на основе элементов HTML5

Главное меню
  • HTML Элементы
  • HTML Атрибуты
  • HTML Таблицы
  • …
Основной контент…
Copyright © 2017 wm-school.ru
<!DOCTYPE html>
<html>
<head>
<style>
#page {
    width: 100%;
}
header {
    background-color:#0095B6;
}
nav>ul {
    list-style: none;
    padding:5px;
}
nav {
    background-color:#dddddd;
    height:200px;
    width:30%;
    float:left;
    padding:5px;        
}
section {
    background-color:#eeeeee;
    height:200px;
    width:70%;
    float:left;
    padding:5px;    
}
footer {
    background-color:#0095B6;
    clear:both;
    text-align:center;
    padding:5px;    
}
</style>
</head>
<body>

<div>
<header>
<h2>Шапка сайта</h2>
</header>

<nav>
<b>Главное меню</b>
<ul>
  <li>HTML Элементы</li>
  <li>HTML Атрибуты</li>
  <li>HTML Таблицы</li>
  <li>...</li>
</ul>
</nav>

<section>
<h2>Заголовок</h2>
<p>Основной контент...</p>
</section>

<footer>
Copyright © 2017 wm-school.ru
</footer>
</div>

</body>
</html>


Please enable JavaScript to view the comments powered by Disqus.

wm-school.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *