آموزش ایجاد فرم با استفاده از HTML: طراحی فرم‌های ساده و کاربردی

< form action="/submit" method="POST" >
    < label for="name" > نام: < / label >
    < input type="text" id="name" name="name" required >
    < br >
    < label for="email" > ایمیل: < / label >
    < input type="email" id="email" name="email" required >
    < br >
    < button type="submit" > ارسال < / button >
< / form >

< form action="/submit" method="POST" >

< input type="text" name="name" >

< input type="email" name="email" >

< input type="password" name="password" >

< input type="number" name="age" >

< input type="date" name="birthdate" >

< input type="file" name="document" >

< button type="submit" > ارسال < / button >

< button type="reset" > پاک کردن < / button >

< label > < input type="checkbox" name="accept" > قبول قوانین < / label >

< label > < input type="radio" name="gender" value="male" > مرد < / label >
< label > < input type="radio" name="gender" value="female" > زن < / label >

< select name="city" >
    < option value="tehran" > تهران < / option >
    < option value="mashhad" > مشهد < / option >
    < option value="shiraz" > شیراز < / option >
< / select >

< textarea name="message" rows="5" cols="30" > < / textarea >

    form {
        width: 300px;
        margin: auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f9f9f9;
    }
    label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }
    input, select, textarea, button {
        width: 100%;
        margin-bottom: 15px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 1em;
    }
    button {
        background-color: #4CAF50;
        color: white;
        border: none;
        cursor: pointer;
    }
    button:hover {
        background-color: #45a049;
    }

< ! DOCTYPE html >
< html lang="fa" dir="rtl" >
< head >
    < meta charset="UTF-8" >
    < meta name="viewport" content="width=device-width, initial-scale=1.0" >
    < meta name="description" content="آموزش ایجاد فرم در HTML" >
    < meta name="keywords" content="HTML, فرم, طراحی فرم, آموزش HTML" >
    < meta name="author" content="نام شما" >
    < title > آموزش ایجاد فرم در HTML < / title >
    < style >
        form {
            width: 300px;
            margin: auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select, textarea, button {
            width: 100%;
            margin-bottom: 15px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1em;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    < / style >
< / head >
< body >
    < header >
        < h1 > آموزش ایجاد فرم در HTML < / h1 >
    < / header >
    < main >
        < form action="/submit" method="POST" >
            < label for="name" > نام: < / label >
            < input type="text" id="name" name="name" placeholder="نام خود را وارد کنید" required >

            < label for="email" > ایمیل: < / label >
            < input type="email" id="email" name="email" placeholder="ایمیل خود را وارد کنید" required >

            < label for="city" > شهر: < / label >
            < select id="city" name="city" >
                < option value="tehran" > تهران < / option >
                < option value="mashhad" > مشهد < / option >
                < option value="shiraz" > شیراز < / option >
            < / select >

            < label for="message" > پیام: < / label >
            < textarea id="message" name="message" rows="4" placeholder="پیام خود را وارد کنید" > < / textarea >

            < button type="submit" > ارسال < / button >
            < button type="reset" > پاک کردن < / button >
        < / form >
    < / main >
    < footer >
        < p > © 2024 طراحی شده توسط نام شما < / p >
    < / footer >
< / body >
< / html >