HTML Форма Тегтері: Толық Нұсқаулық

Ukzay · Квт. 02, 2025, 12:26 PM

HTML формалары веб-сайттарда пайдаланушылардан ақпарат жинаудың негізгі құралы болып табылады. Олар логин, тіркеу, іздеу немесе кері байланыс сияқты функцияларды жүзеге асыру үшін қолданылады. Бұл мақалада HTML форма тегтерінің негізгі элементтері, олардың қолданылуы және практикалық код үлгілері SEO-ға сәйкес және түсінікті түрде ұсынылады. Егер сіз веб-әзірлеуді үйреніп жатсаңыз, бұл нұсқаулық сізге өте пайдалы болады!

HTML Форма Тегтері Дегеніміз Не?
HTML-дағы формалар <form> тегімен басталып, пайдаланушыдан деректерді қабылдауға және оларды серверге жіберуге мүмкіндік береді. Формалардың негізгі құрамдас бөліктері: енгізу өрістері, батырмалар және басқа да басқару элементтері. Міне, негізгі тегтерге шолу:

Негізгі HTML Форма Тегтері және Олардың Қолданылуы
1. <form> Тегі
Форма құрылымының негізі. Ол action (деректер жіберілетін URL) және method (GET немесе POST) атрибуттарын қамтиды.

Ко Select

<form action="/submit" method="POST">
    <!-- Форма элементтері осында орналасады -->
</form>

2. <input> Тегі
Пайдаланушыдан деректерді қабылдауға арналған ең көп қолданылатын тег. Оның type атрибуты әртүрлі болуы мүмкін:

Ко Select

<form action="/submit" method="POST">
    <input type="text" name="username" placeholder="Атыңызды енгізіңіз">
    <input type="password" name="password" placeholder="Құпия сөз">
    <input type="submit" value="Жіберу">
</form>

type="text": Мәтін енгізу.
type="password": Құпия сөз енгізу.
type="submit": Форманы жіберу батырмасы.

3. <label> Тегі
Енгізу өрістеріне түсініктеме береді және қолжетімділікті (accessibility) жақсартады.

Ко Select

<form action="/submit" method="POST">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Email енгізіңіз">
    <input type="submit" value="Жіберу">
</form>

4. <textarea> Тегі
Ұзын мәтіндерді (мысалы, пікірлерді) енгізуге арналған.

Ко Select

<form action="/submit" method="POST">
    <label for="comment">Пікіріңіз:</label>
    <textarea id="comment" name="comment" rows="4" cols="50" placeholder="Пікіріңізді жазыңыз"></textarea>
    <input type="submit" value="Жіберу">
</form>

5. <select> және <option> Тегтері
Ашылмалы тізім жасауға мүмкіндік береді.

Ко Select

<form action="/submit" method="POST">
    <label for="city">Қаланы таңдаңыз:</label>
    <select id="city" name="city">
        <option value="kyiv">Київ</option>
        <option value="lviv">Львів</option>
        <option value="odesa">Одеса</option>
    </select>
    <input type="submit" value="Жіберу">
</form>

6. <button> Тегі
Форманы жіберу немесе басқа әрекеттерді орындау үшін қолданылады.

Ко Select

<form action="/submit" method="POST">
    <input type="text" name="username" placeholder="Атыңыз">
    <button type="submit">Жіберу</button>
</form>

Практикалық Мысал: Толық Форма
Төменде тіркеу формасының қарапайым үлгісі берілген:

Ко Select

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Тіркеу Формасы</title>
</head>
<body>
    <h2>Тіркеу</h2>
    <form action="/register" method="POST">
        <label for="username">Атыңыз:</label><br>
        <input type="text" id="username" name="username" required><br>

        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email" required><br>

        <label for="password">Құпия сөз:</label><br>
        <input type="password" id="password" name="password" required><br>

        <label for="gender">Жынысыңыз:</label><br>
        <select id="gender" name="gender">
            <option value="male">Ер</option>
            <option value="female">Әйел</option>
        </select><br><br>

        <button type="submit">Тіркелу</button>
    </form>
</body>
</html>

HTML Формаларының SEO-ға Әсері

Қолжетімділік: <label> тегін қолдану экран оқырмандарына (screen readers) көмектеседі, бұл SEO-ны жақсартады.
Тиімділік: Дұрыс құрылған формалар пайдаланушы тәжірибесін (UX) жақсартады, бұл Google-дың рейтинг факторларының бірі.
Кілт сөздер: Формаға қатысты мазмұнды дұрыс құрылымдау іздеу жүйелерінде жоғары орын алуға ықпал етеді.

Қорытынды
HTML форма тегтері веб-әзірлеудің ажырамас бөлігі. <form>, <input>, <textarea>, <select> сияқты тегтерді дұрыс қолдану арқылы сіз функционалды және пайдаланушыға ыңғайлы формалар жасай аласыз. Жоғарыдағы код үлгілері мен кеңестер сізге HTML формаларын тиімді пайдалануға көмектеседі. Егер сіз веб-әзірлеуді тереңірек зерттегіңіз келсе, осы тақырыпты одан әрі қарастырыңыз!

HTML Форма Тегтері: Толық Нұсқаулық

Ukzay