Основные элементы форм

2.1 Элемент <input>

Формы являются важным компонентом веб-страниц и дают возможность пользователям вводить и отправлять данные. Основными элементами форм являются <input>, <textarea> и <button>. Эти элементы позволяют юзерам вводить текст, выбирать варианты, загружать файлы и выполнять другие действия.

Элемент <input> является одним из наиболее часто используемых элементов форм. Он поддерживает множество типов ввода данных и может использоваться для различных целей, таких как ввод текста, выбор файлов, указание дат и т. д.

Общий синтаксис:

    
      <input type="type" name="name" id="id" value="value" placeholder="placeholder" required>
    
  

Атрибуты <input>

• type: определяет тип ввода
• name: имя элемента формы, используется для идентификации данных на сервере
• id: уникальный идентификатор элемента
• value: начальное значение элемента
• placeholder: текст-заполнитель, отображаемый внутри элемента до ввода данных
• required: указывает, что элемент обязателен для заполнения

Пример <input>

input-text позволяет вводить однострочный текст.

    
      <input type="text" name="username" id="username" placeholder="Введите имя пользователя" required>
    
  

2.2 Элемент <textarea>

Элемент <textarea> используется для ввода многострочного текста. Он отличается от <input type="text"> тем, что позволяет вводить текст, содержащий несколько строк, и может быть настроен по размеру.

Общий синтаксис:

    
      <textarea name="name"
        id="id"
        rows="rows" cols="cols"
        placeholder="placeholder" required>
      </textarea>
    
  

Атрибуты <textarea>

• name: имя элемента формы, используется для идентификации данных на сервере
• id: уникальный идентификатор элемента
• rows: количество строк текста
• cols: количество символов в одной строке
• placeholder: текст-заполнитель, отображаемый внутри элемента до ввода данных
• required: указывает, что элемент обязателен для заполнения

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

    
      <label for="comments">Комментарии:</label>
      <textarea name="comments"
        id="comments"
        rows="5"
        cols="40"
        placeholder="Введите ваши комментарии здесь..."
        required>
      </textarea>
    
  

Стилизация <textarea>

Элемент <textarea> можно стилизовать с помощью CSS, чтобы улучшить внешний вид и пользовательский опыт.

Пример стилизации:

    
      textarea {
        width: 75%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical; /* resize будет доступен только по вертикали */
      }
    
  

    
      <label for="comments">Комментарии:</label>
      <textarea name="comments"
        id="comments"
        rows="5" placeholder="Введите ваши комментарии здесь..." required>
      </textarea>
    
  

2.3 Элемент <button>

Элемент <button> используется для создания кнопок в формах. В отличие от <input type="button">, элемент <button> более гибкий, и он позволяет вставлять кнопки различные HTML-элементы, такие как текст, изображения и т. д.

Общий синтаксис:

    
      <button type="type" name="name" id="id" value="value">Текст кнопки</button>
    
  

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

    
      <button type="submit">Отправить</button>
      <button type="reset">Сбросить</button>
      <button type="button" onclick="alert('Кнопка нажата!')">Нажми меня</button>
    
  

Атрибуты <button>

1. type: определяет поведение кнопки. Возможные значения:
   • submit: отправляет форму (значение по умолчанию)
   • reset: сбрасывает форму
   • button: произвольная кнопка, не выполняет действий по умолчанию
2. name: имя элемента формы, используется для идентификации данных на сервере.
3. id: уникальный идентификатор элемента.
4. value: значение, отправляемое на сервер при отправке формы.

Вложенный HTML в <button>

Элемент <button> позволяет вставлять внутрь него различные HTML-элементы для создания более сложных кнопок.

Пример с вложенным HTML:

    
      <button type="type" name="name" id="id" value="value">
        📨Отправить
      </button>
    
  

    
      <button type="type" name="name" id="id" value="value">
        <img src="submit_icon.png" alt="Отправить">
        Отправить
      </button>
    
  

Стилизация <button>

Элемент <button> можно стилизовать с помощью CSS для улучшения внешнего вида и пользовательского опыта.

Пример стилизации:

    
      button {
        background-color: #4CAF50; /* Зеленый фон */
        color: white; /* Белый текст */
        padding: 15px 20px; /* Внутренние отступы */
        border: none; /* Без границ */
        border-radius: 4px; /* Скругленные углы */
        cursor: pointer; /* Указатель курсора */
      }

      button:hover {
        background-color: #45a049; /* Темно-зеленый фон при наведении */
      }
    
  

    
      <button type="submit">Отправить</button>
    
  

1

Задача

Модуль 1: Web Core, 5 уровень, 1 лекция

Недоступна

Текстовое поле

Текстовое поле

Открыть

1

Задача

Модуль 1: Web Core, 5 уровень, 1 лекция

Недоступна

Кнопки

Кнопки

Открыть