HTML ile yapılan kayıt olma formu nasıl?

kaankesen · 16 Aralık 2023

Selam dostlar kendi yapmış olduğum kayıt olma formu sizce nasıl olmuş? Henüz CSS bilgim olmadığı için sadece HTML üzerinden gittim. Fikirlerinizi bekliyorum.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Üye Olun</title>
</head>
<body>
 <header>
 <nav>
 <a href="#">Giriş yap</a>
 --
 <a href="#">Misafir olarak devam et</a>
 --
 <a href="#">Destek iste</a>
 </nav>
 </header>
 <h1> FORMU EKSİKSİZ DOLDURUN</h1>
 <h2>Hesap Bilgileri:</h2>
 <section id="nickname,mail,password">
 <table>
 <tr>
 <td>
 <label for="nickname">Kullanıcı adınız:</label>
 </td>
 <td style="width: 50px;"></td>
 <td>
 <input type="text" name="" id="nickname">
 </td>
 </tr>
 <tr>
 <td>
 <label for="eposta">E-Posta:</label>
 </td>
 <td style="width: 50px;"></td>
 <td>
 <input type="email" name="" id="eposta">
 </td>
 </tr>
 <tr>
 <td>
 <label for="şifre">Parola:</label>
 </td>
 <td style="width: 50px;"></td>
 <td>
 <input type="password" name="" id="şifre">
 </td>
 </tr>
 </table>
 </section>
 <h2>Kişisel Bilgileriniz</h2>
 <section>
 <table>
 <tr>
 <td>
 <label for="name">Adınız:</label>
 </td>
 <td style="width: 50px;"></td>
 <td>
 <input type="text" id="name">
 </td>
 </tr>
 <tr>
 <td>
 <label for="surname">Soyadınız:</label>
 </td>
 <td style="width: 50px;"></td>
 <td>
 <input type="text" id="surname">
 </td>
 </tr>
 <tr>
 <td>
 <label for="age">Yaşınız</label>
 </td>
 <td style="width: 50px;"></td>
 <td>
 <input type="date" id="age" max="2005-01-01" min="1950-01-01">
 </td>
 </tr>
 <tr>
 <td>
 <label for="cinsiyet">Cinsiyetiniz:</label>
 </td>
 <td style="width: 25px;"></td>
 <td>
 <label for="cinsiyet2">Erkek</label>
 <input type="radio" name="cinsiyett" id="cinsiyet2">
 </td>
 <td style="width: 25px;"></td>
 <td>
 <label for="cinsiyet3">Kadın</label>
 <input type="radio" name="cinsiyett" id="cinsiyet3">
 </td>
 </tr>
 <tr>
 <td>
 <label for="cities">Yaşadığınız Şehir:</label>
 </td>
 <td style="width: 25px;"></td>
 <td>
 <select name="" id="cities">
 <option value="01">Adana</option>
 <option value="06">Ankara</option>
 <option value="07">Amasya</option>
 <option value="34">İstanbul</option>
 <option value="35">İzmir</option>
 <option value="60">Tokat</option>
 <option value="75">Ardahan</option>
 <option value="76">Iğdır</option>
 </select>
 </td>
 </tr>
 <tr>
 <td>
 <label for="hobby">Hobileriniz:</label>
 </td>
 <td style="width: 10px;"></td>
 <td>
 <label for="hobbies">Film İzlemek</label>
 <input type="checkbox" name="" id="hobbies">
 </td>
 <td style="width: 10px;"></td>
 <td>
 <label for="hobbies2">Kitap Okumak</label>
 <input type="checkbox" name="" id="hobbies2">
 </td>
 <td style="width: 25px;"></td>
 <td>
 <label for="hobbies3">Gezmek</label>
 <input type="checkbox" name="" id="hobbies3">
 </td>
 <td style="width: 25px;"></td>
 <td>
 <label for="hobbies4">Bilgisayar ile vakit geçirmek</label>
 <input type="checkbox" name="" id="hobbies4">
 </td>
 </tr>
 </table>
 <table>
 <tr>
 <td>
 <button>Kayıt Ol</button>
 </td>
 </tr>
 </table>
 </section>

 </form>
</body>
</html>

engin beyefendi · 16 Aralık 2023

CSS sadece inline mı?

kaankesen · 16 Aralık 2023

engin beyefendi dedi:
CSS sadece inline mı?

İnternal veya İnline kullanılmadı CSS hakkında şu an bir bilgi sahibi değilim hocam.

squaLLxq · 16 Aralık 2023

Şimdi hocam yanlış anlamayın da html bir iskelet gibi bir şey. İskelete de yorum yapmak bana göre saçma. Çünkü kodlar aynı tasarım aynı kim gidip mesela " <input type="password" name="" id="şifre">" yazsa hangi site olursa olsun aynı gözükecek. Umarım anlamışsındır beni. CSS bilmiyorsan bu kodları ChatGPT'ye atarak sıfır kod bilgisiyle güzel tasarım yaptırabilirsin.

Örnek:

Kod:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Üye Olun</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }

        nav {
            display: flex;
            justify-content: space-around;
            margin: 10px 0;
        }

        section {
            max-width: 600px;
            margin: 20px auto;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h1, h2 {
            color: #333;
        }

        form {
            display: flex;
            flex-direction: column;
        }

        label {
            margin-top: 10px;
            color: #555;
        }

        input,
        select,
        button {
            width: 100%;
            padding: 10px;
            margin: 8px 0;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }

        button {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>

<header>
    <h1>FORMU EKSİKSİZ DOLDURUN</h1>
    <nav>
        <a href="#">Giriş yap</a>
        <a href="#">Misafir olarak devam et</a>
        <a href="#">Destek iste</a>
    </nav>
</header>

<section>
    <h2>Hesap Bilgileri:</h2>
    <form>
        <label for="nickname">Kullanıcı adınız:</label>
        <input type="text" id="nickname" required>

        <label for="eposta">E-Posta:</label>
        <input type="email" id="eposta" required>

        <label for="şifre">Parola:</label>
        <input type="password" id="şifre" required>
    </form>
</section>

<section>
    <h2>Kişisel Bilgileriniz</h2>
    <form>
        <!-- Add your personal information fields here -->

        <button>Kayıt Ol</button>
    </form>
</section>

</body>
</html>

öylebiri işte · 16 Aralık 2023

Güzel eline sağlık fakat gerçekten çalışan bir kayıt formu için sayfa PHP yazılabilir ve MySQL database oluşturulup gerekli tablo ve satırlar ile ilişkilendrilip sayfanın ona göre kayıtları yapacak şekilde tasarlanabilir CSS çalışması için şart değil fakat kullanışlılık ve estetik görünüm için şart.

kaankesen · 16 Aralık 2023

öylebiri işte dedi:
Güzel eline sağlık fakat gerçekten çalışan bir kayıt formu için sayfa PHP yazılabilir ve MySQL database oluşturulup gerekli tablo ve satırlar ile ilişkilendrilip sayfanın ona göre kayıtları yapacak şekilde tasarlanabilir CSS çalışması için şart değil fakat kullanışlılık ve estetik görünüm için şart.

Teşekkür ederim hocam değerlendireceğim sağolun.

squaLLxq dedi:

Şimdi hocam yanlış anlamayın da html bir iskelet gibi bir şey. İskelete de yorum yapmak bana göre saçma. Çünkü kodlar aynı tasarım aynı kim gidip mesela " <input type="password" name="" id="şifre">" yazsa hangi site olursa olsun aynı gözükecek. Umarım anlamışsındır beni. CSS bilmiyorsan bu kodları ChatGPT'ye atarak sıfır kod bilgisiyle güzel tasarım yaptırabilirsin.

Örnek:

Kod:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Üye Olun</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }

        nav {
            display: flex;
            justify-content: space-around;
            margin: 10px 0;
        }

        section {
            max-width: 600px;
            margin: 20px auto;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h1, h2 {
            color: #333;
        }

        form {
            display: flex;
            flex-direction: column;
        }

        label {
            margin-top: 10px;
            color: #555;
        }

        input,
        select,
        button {
            width: 100%;
            padding: 10px;
            margin: 8px 0;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }

        button {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>

<header>
    <h1>FORMU EKSİKSİZ DOLDURUN</h1>
    <nav>
        <a href="#">Giriş yap</a>
        <a href="#">Misafir olarak devam et</a>
        <a href="#">Destek iste</a>
    </nav>
</header>

<section>
    <h2>Hesap Bilgileri:</h2>
    <form>
        <label for="nickname">Kullanıcı adınız:</label>
        <input type="text" id="nickname" required>

        <label for="eposta">E-Posta:</label>
        <input type="email" id="eposta" required>

        <label for="şifre">Parola:</label>
        <input type="password" id="şifre" required>
    </form>
</section>

<section>
    <h2>Kişisel Bilgileriniz</h2>
    <form>
        <!-- Add your personal information fields here -->

        <button>Kayıt Ol</button>
    </form>
</section>

</body>
</html>

Teşekkür ederim hocam deneyeceğim.

LongShort · 17 Aralık 2023

Bootstrap öğrenip, tasarımı bootstrap ile yapmalısınız diye düşünüyorum. HTML, CSS ve Chatgpt ile değil.

HTML ile yapılan kayıt olma formu nasıl?

Ayrıntılı düzenleme

kaankesen

Hectopat

engin beyefendi

Hectopat

kaankesen

Hectopat

squaLLxq

Hectopat

öylebiri işte

Picopat

kaankesen

Hectopat

LongShort

Decapat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz