CSS Form

Örnek Form HTML Kodları

<form action="" class="demo-form1">
    <div class="input-wrap">
        <label class="f-title" for="name">Adınız/Soyadınız</label>
        <input type="text" id="name" name="name" class="input" placeholder="Adınız/soyadınız"
            required>
    </div>
    <div class="input-wrap">
        <label class="f-title" for="phone">Telefon Numaranız</label>
        <input type="number" id="phone" name="phone" class="input" placeholder="(5xx)(123 45 67)"
            required>
    </div>
    <div class="input-wrap">
        <label class="f-title" for="email">E-Posta Adresiniz</label>
        <input type="email" id="email" name="email" class="input" placeholder="E-Posta Adresiniz"
            required>
    </div>

    <div class="input-wrap">
        <label class="f-title" for="dogumyeri">Doğum Yeriniz</label>
        <input type="text" id="dogumyeri" class="input" name="dogumyeri" placeholder="İl/ilçe"
            required>
    </div>

    <div class="input-wrap">
        <label class="f-title" for="birthday">Doğum Yeriniz</label>
        <input type="date" id="birthday" name="birthday" class="input" placeholder="İl/ilçe"
            required>
    </div>
    <div class="input-wrap">
        <label class="f-title" for="">Eğitim Durumunuz</label>
        <input class="radio-label" type="radio" name="education" value="lise" id="edu1">
        <label class="radio-label" for="edu1">Lise</label>

        <input type="radio" name="education" value="lise" id="edu2">
        <label class="radio-label" for="edu2">Lisans</label>

        <input type="radio" name="education" value="lise" id="edu3">
        <label class="radio-label" for="edu3">Yüksek lisans</label>

    </div>
    <div class="input-wrap">
        <label class="f-title" for="gender">Cinsiyetiniz</label>
        <select class="input" id="gender" name="gender">
            <option selected disabled>Cinsiyetiniz</option>
            <option value="Erkek">Erkek</option>
            <option value="Bayan">Bayan</option>
        </select>
    </div>
    <div class="input-wrap">
        <textarea name="message" id="message" class="textarea"></textarea>
    </div>
    <div class="input-wrap file-wrap">
        <label class="f-title" for="file">CV YÜKLE</label>
        <input type="file" name="file" id="file">
    </div>
    <input type="submit" id="submit" name="submit" value="FORMU GÖNDER">

</form>
                

Örnek Form CSS Kodları

.demo-form1 {
    padding: 20px;
    background-color: #e9e9f1;
    border: 1px solid #bebed6;
    width: 600px;
    max-width: 100%;
  }
  
  .demo-form1 input::placeholder,
  .demo-form1 textarea::placeholder,
  .demo-form1 select::placeholder {
    opacity: 0.8;
  }
  
  .demo-form1 textarea {
    width: 100%;
    height: 100px;
  }
  
  .demo-form1 .input-wrap {
    padding: 10px 0;
  }
  
  .demo-form1 .input {
    background-color: #fff;
    border: 1px solid #bebed6;
    width: 100%;
    height: 48px;
    padding: 10px 15px;
  }
  
  .demo-form1 input:not([type="radio"]) {
    width: 100%;
  }
  
  .demo-form1 label.f-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
  }
  
  .demo-form1 .radio-label {
    font-weight: 600;
    font-size: 13px;
  }
  
  .demo-form1 input[type="file"] {
    padding-left: 0;
  }
  
  .demo-form1 input[type="submit"] {
    color: #fff;
    border-color: transparent;
    background-color: #e21346;
    font-weight: 600;
    font-size: 16px;
    padding: 8px 15px;
    transition: 0.3s ease all;
  }
  
  .demo-form1 input[type="submit"]:hover {
    background-color: #c00d3a;
  }