Зертханалық жұмыс: Формалар мен шағын-макеттерді құру

Мақсат: HTML тегтерін қолданып формалар мен шағын-макеттер құруды үйрену, сондай-ақ пайдаланушылардан деректер жинауға арналған қарапайым формалар жасау.

Бағалау критерийлері:
• Форма құруға арналған тегтерді қолдана алады.
• Әртүрлі енгізу өрістері бар құрылымдалған формалар жасайды.
• Пайдаланушы интерфейстері үшін шағын-макеттер құрастырады.

Жұмыстың барысы:

1. Дайындық кезеңі:
   o Форма құруға арналған HTML тегтерін зерттеңіз:
   <form>: форма контейнері.
   <input>: енгізу өрісі.
    <textarea>: мәтін өрісі.
   <select> және <option>: ашылмалы тізім.
    <button>: батырмалар.
   <label>: форма элементтері үшін белгі.

o Тегтердің атрибуттарымен танысыңыз:
<form> үшін action, method.
<input> үшін type, name, placeholder, required.

2. HTML-құжатты құру: Мәтіндік редакторды ашып (мысалы, Visual Studio Code), .html кеңейтімі бар жаңа файл жасаңыз.

Негізгі құрылымды қосыңыз:

<!DOCTYPE html><html lang=»kk»><head>    <meta charset=»UTF-8″>    <meta name=»viewport» content=»width=device-width, initial-scale=1.0″>    <title>Кері байланыс формасы</title></head><body>    <!— Форма контенті —></body></html>

3. Форма құру:
   <form> контейнерін қосыңыз:

<form action=»/submit» method=»post»>    <h2>Кері байланыс формасы</h2></form>

Мәтін енгізу өрісі:

<label for=»name»>Атыңыз:</label><input type=»text» id=»name» name=»name» placeholder=»Атыңызды енгізіңіз» required>

Email өрісі:

<label for=»email»>Email:</label><input type=»email» id=»email» name=»email» placeholder=»Email енгізіңіз» required>

Мәтіндік аймақ:

<label for=»message»>Хабарлама:</label><textarea id=»message» name=»message» rows=»4″ placeholder=»Хабарламаңызды енгізіңіз»></textarea>

Ашылмалы тізім:

<label for=»topic»>Тақырып:</label><select id=»topic» name=»topic»>    <option value=»feedback»>Кері байланыс</option>    <option value=»support»>Қолдау</option>    <option value=»other»>Басқа</option></select>

Жіберу батырмасы:

<button type=»submit»>Жіберу</button>

4. Шағын-макет құру:

Форманы құрылымдау үшін қосымша элементтерді қосыңыз:

<fieldset>    <legend>Байланыс ақпараты</legend>    <label for=»phone»>Телефон:</label>    <input type=»tel» id=»phone» name=»phone» placeholder=»Телефон нөміріңізді енгізіңіз»></fieldset>

5. Форманы рәсімдеу:
   Барлық өрістердің <label> арқылы белгіленгенін тексеріңіз.
   Міндетті өрістер үшін required атрибутын қолданыңыз.
6. Жұмысты тексеру:
   Файлды сақтап, браузерде ашыңыз.
   Форманың дұрыс көрсетілуін және өрістердің жұмысын тексеріңіз.
7. Есепті рәсімдеу: Қоса беріңіз:
   HTML-құжат коды.
   Браузердегі нәтиженің скриншоты.
   Жасалған формаға қысқаша сипаттама.

Тапсырма мысалы:
Іс-шараға тіркелу формасын жасаңыз. Формада мыналар болуы тиіс:
• Аты енгізу өрісі.
• Email өрісі.
• Күн таңдау өрісі.
• Билет түрін (қалыпты, VIP) таңдауға арналған ашылмалы тізім.
• Деректерді жіберу батырмасы.

Кеңестер:
• Деректерді енгізуді ыңғайлы ету үшін placeholder атрибутын қолданыңыз.
• Форманың адаптивті болуын және әртүрлі құрылғыларда дұрыс көрсетілуін қадағалаңыз.
• Міндетті өрістердің валидациясын тексеріңіз.