Формы!

Формы выкарыстоўваюцца для атрымання інфармацыі ад карыстальніка, напрыклад, каб увайсці на сайт вы запаўняеце палі формы – пішаце вашу пошту і пароль, а потым ціскаеце кнпоку ‘Log In’. Таксама праз форму адпраўляюць тэксты, файлы, абіраюць тып аплаты, дадаюць каментары і г.д. Карацей, разабраліся, праз формы карыстальнік дасылае інфармацыю. Пачнем.
Зробім самую простую форму аўтарызацыі. Форма мае наступную структуру. Сам тэг <form></form> – кантэйнер які змяшчае палі <input>. Вось і ўся структура. Палі могуць быць розных тыпаў: тэкст, пароль, файл, кнопка, даслаць і г.д. Пішам код.

                <form>
<input type="email">
<input type="password">
<input type="submit">
</form>
Першае поле тыпу email. Служыць для таго, каб туды ўводзілі email. Паспрабуйце ўвесці туды нешта іншае і ціснуць кнопку даслаць – пабачым паведамленне аб памылке.
Другое поле тыпу password. Служыць для паролю. Пачныце туды пісаць і пабачыце, што тэкс “зашыфроўваецца” кропкамі.
Трэцяе поле тыпу submit(даслаць). Звычайная кнопка, але калі Вы ціснеце на яе, форма дашлецца на сервер.
Разабраліся што input мае атрыбут type, які вызначае яго мэту. Пполе мае атрыбут name – які задае яго імя(каб на сервере разабрацца што да чаго).
А атрыбут value задае папярэдняе значэнне полю.
        <form>
<input type="text" value="Some text">
</form>
input – глядзім атрыбуты, і знаёмімся з кожным тыпам.
Тут мы разгялдзім некалькі тыпаў
text – тэкставае поле.
        <form>
<input type="text">
</form>
file – абіраем файл для загрузкі.
        <form>
<input type="file">
</form>
checkbox – можа прымаць значэнне – checked ці не.
        <form>
Are u 18+?<input type="checkbox">
Are u man?<input type="checkbox">
</form>
Форма таксама можна змяшчаць элемент select – выпадаючы спіс. А <options></options> яго элементы. Напрыклад:
    <form>
<select name="favoritefood" id="favoritefood">
<option>Cheese</option>
<option>Egg</option>
<option>Cabbage</option>
</select> </form>
Канешне побач з палямі неабходны паясняльны подпіс.
    <form>
Your name: <input type="text">
Your email: <input type="email">
<input type="submit" value="Send">
</form>
Для гэтага служыць элемент:
label. Дадзім id полю і запоўнім атрыбут for у label. Так мы звязалі label з input. Таму калі мы ціснем на подпіс – мы можам пачынаць запаўняць інпут(ён спаймае фокус).
Проста ціснеце на подпіс(‘Your name’) і параўнайце з проста тэкстам(‘Your email’)
    <form>
<label for="name">Your name:</label> <input id="name" type="text">
Your email: <input type="email">
<input type="submit" value="Send">
</form>
html5 валідацыя.
Html5 формы маюць убудаваную валідацыю. Памятаеце паведамленне ад email? Уведзіце любы тэкст і пабачыце html5 валідацыю.
        <form>
<input type="email">
<input type="submit">
</form>
Тып email ужо надаў валідацыю. Таксама валідацыю і ня толькі можна дадаваць праз атрыбуты палей.
тэкставыя атрыбуты лічбавыя атрыбуты Напрыклад тэкставы maxlength – вызначае максымальна магчымую даўжыню значэння поля.
Праверым:
        <form>
<input maxlength="5" type="text">
<input type="submit" value="Send">
</form>
Паспрабуйце ўвесці больш за 5 літар.
Атрыбут required – патрабуе каб поле абавязкова было запоўнена. Напрыклад:
        <form>
<input required type="text">
<input type="submit">
</form>
Калі мы хочам карыстацца сваёй валідацыей, адключым убудаваную. Робіцца гэта праз атрыбут формы novalidate.
        <form novalidate>
<input required type="email">
<input type="submit">
</form>
form – глядзіце ўсе атрыбуты формы.
Трошкі крутых атрыбутаў:
autofocus – змясціць фокус на элемент.
        <form>
<input type="text">
<input type="text">
<input type="text" autofocus>
<input type="text">
</form>
autocomplete – кажа каб браўзер захоўваў што у поле ўводзілі раней.
        <form>
<input type="text" autocomplete>
<input type="number" autocomplete>
</form>
placeholder – падказка для тэкставых палей.
        <form>
<input type="email" placeholder="your email">
</form>
disabled – робіць поле не актыўным
        <form>
<input type="email" disabled>
</form>
readonly – забараняе рэдагаваць поле
        <form>
<input type="text" value="98$" readonly>
</form>
Вось хуткі агляд формаў. Памятайце што формы блочны элемент, таму можа змяшчаць іншыя блочныя элементы. Абарочвайце вашыя палі ў блокі растаўляйце float, не забывайце clear – каб размесціць подпісы, палі як Вам трэба. А зараз Хатняе заданне:
Заверстаць старонку http://course.by/wp-login.php і дадаць html5 валідацыю на пароль.

Наступны занятак