Създаване на текстово поле, форми и бутони в HTML form, field, button elements

Урок 17. Create a Text Field връзка>>

Нека създадем уеб формуляр. Текстовите полета са удобен начин да получите информация от вашия потребител.
Можете да създадете такава:
<input type = "text">
Имайте предвид, че input елемента е самозатварящ се, т.е. има един таг <input >  Изписва се кода преди затварящата > скоба. Не съществува затварящ таг </input>!!!
Задачата ви е: Създайте входен елемент от типа текст под списъците си. 

Урок 18. Add Placeholder Text to a Text Field

Добавяне на празен текст в текстово поле. Текстът заместител /placeholder text/ е това, което се появява в текстовото поле за въвеждане, преди потребителят да въведе нещо.
Можете да създадете текст заместител по начина указан долу, като атрибута на placeholder text е това, което стои в кавичките лсед знака за равенство:

<input type="text" placeholder="this is placeholder text">

Запомнете: Input е самозатварящ се елемент.
Задачата ви е: Задайте стойност  на атрибута на текста заместител /placeholder/ в текстовото поле за въвеждане "cat photo URL"


Урок 19. Create a Form Element 

Можете да създавате уеб формуляри / web forms/, които всъщност изпращат данни на сървър, използвайки само чист HTML. Можете да направите това, като посочите действие върху елемента за формуляри /form element/. Този елемент има отварящ таг <form> и затварящ таг </form>. Атрибута за действие се вписва преди затварящата триъгълна скоба > на отварящия таг.

Например:

<form action="url-where-you-want-to-submit-form-data">
  <input>
</form>

Задачата ви: Разположете текстовото си поле вътре във form element. Добавете атрибута action="https://www.freecatphotoapp.com/submit-cat-photo" на този елемент от формуляра /form element/. 

Следващата ви задача е да добавите бутон Submit към вашата форма за изпращане на текст.

Урок 20. Add a Submit Button to a Form

Да добавим бутон за изпращане / Submit във формуляра ви. Кликването върху този бутон ще изпраща данните от формуляра ви до посочения от Вас URL адрес в атрибута за действие на формуляра ви. button - елемента в HTML има отварящ <button> и затварящ таг </button>.

В отварящия таг преди затварящата триъгълна скоба > се описва типа на бутона. А съдържанието на бутона, което вижда потребителя се намира между затварящата скоба на отварящия таг и затварящия таг >ИМЕ-БУТОН</button>.
Ето един пример за Submit бутон за изпращане, който съдържа текста this button submits the form :

<button type="submit">this button submits the form</button>

Задачата ви е: Добавете бутон за изпращане към елемента на формуляра от типа submit с текста "Submit" кето съдържание.
Убедете се, че бутона за изпращане е вътре във формата ви за изпращане.
Вашият submit бутон трябва да има атрибута за тип/typе, който да е със стойностsubmit.
Бутона има единствено текст Submit
Уверете се, че button element има затварящ таг. 


Урок 21. Use HTML5 to Require a Field 

Можете да направите полето задължително във формуляра, така че потребителят да не може да изпрати празен формуляр.

Например, ако искате да въведете поле за въвеждане на текст, можете просто да добавите думата required, която се изисква в рамките на вашия <input елемент, като този код използвате: <input type="text" required>

Задачата ви е: Направете въвеждането на текст да задължително поле - required, така че потребителят да не може да изпрати формуляра, без да попълни това поле.

След това опитайте да изпратите формуляра без да въвеждате текст. Вижте как формулярът HTML5 ви уведомява, че полето е задължително.
Забележка: Това поле не работи в Safari.

Готови сте за новия урок: Create a Set of Radio Buttons>>
Към съдържанието на темите: Responsive Web Design>>