HTML'de form nasıl yapılır?

Muhammet Erda

Decapat
Katılım
26 Kasım 2020
Mesajlar
421
Daha fazla  
Cinsiyet
Erkek
1669452082174.png


Bu bölümü table içinde mi yazacağım? Sol üstteki kırmızı başlığı nasıl yapabilirim çizgilerle beraber?

1669452251194.png


Bu bölümdeki gri kısmı nasıl yapabilirim?
 
Çözüm
HTML:
<form>
    <fieldset>
        <legend>
            BAŞLIĞIN BURAYA
        </legend>
        
        ********
        FORM ELEMANLARI BURAYA
        ********
    </fieldset>
</form>

Üstteki şekilde yapabilirsin.
Form örneğine yakın bir örnek bırakıyorum aşağıya başlıklı bir şekilde.

HTML:
<head>
    <style>
    .bg {
  background-color:gray;
}
    </style>
</head>
<form name="" action="" method="">
 <fieldset>
   <legend>Başvuru Form</legend>
<table border="1" style="width:100%">
<tr>
<td class="bg">Adı Soyadı*</td>
<td>
<input type="text" name="" size="45" required/>
</td>
</tr>
<tr>
<td class="bg">Doğum Tarihi *</td>
<td>
<input type="date" name="" style="width:100%" required/>
</td>
</tr>         
<tr>
<td class="bg">Cinsiyet *</td>
<td>
<input type="radio" name="cinsiyet"/> ERKEK
<input type="radio" name="cinsiyet"/> KADIN
</td>
</tr>
<tr>
<td class="bg">E-Posta Adresi *</td>
<td>
<input type="email" name="" size="45" required/>
</td>
</tr>       
<tr>
<td class="bg">Telefon *</td>
<td>
<input type="tel" name="" placeholder="(___)(_______)" size="45" required/>
</td>
</tr>       
<tr>
<td class="bg">Mezuniyet Durumu *</td>
<td>
<input type="radio" name="mezuniyet"/> İlkokul
<input type="radio" name="mezuniyet"/> Ortaokul
<input type="radio" name="mezuniyet"/> Lise
<input type="radio" name="mezuniyet"/> Üniversite             
</td>
</tr>
<tr>
<td class="bg">İngilizce Seviyeniz *</td>
<td>
<select id="" name="" style="width:100%">
<option value="">Seçiniz</option>
<option value="">Bilmiyorum</option>
<option value="">Orta Seviye</option>
<option value="">İleri Seviye</option>
</select>               
</td>
</tr>
<tr>
<td class="bg">Çalışmak İstediğiniz Pozisyon</td>
<td>
<input type="checkbox"> Bilgi İşlem <br />
<input type="checkbox"> Muhasebe <br />
<input type="checkbox"> Pazarlama <br />
<input type="checkbox"> Asistan <br />
</td>
</tr>
<tr>
<td class="bg">Askerlik Durumu</td>
<td>
<select id="" name="" style="width:100%">
<option value="">Seçiniz</option>
<option value="">Tecilli</option>
<option value="">Muaf</option>
<option value="">Yapıldı</option>
</select>               
</td>
</tr>
<tr>
<td class="bg">Ek Bilgi</td>
<td>
<textarea name="" rows="7" style="width: 100%" placeholder="Sizinle ilgili eklemek istediğiniz diğer bilgileri buraya yazabilirsiniz."></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="BAŞVUR"/>
</td>
</tr>             
</table>
  </fieldset>
</form>

Ekran görüntüsü de bu şekilde:
1669619907710.png

dgknbzglu

Hectopat
Katılım
5 Mart 2019
Mesajlar
1.108
Çözümler
29
Yer
İstanbul/Maltepe
Daha fazla  
Cinsiyet
Erkek
Meslek
PHP Developer
HTML:
<form>
    <fieldset>
        <legend>
            BAŞLIĞIN BURAYA
        </legend>
        
        ********
        FORM ELEMANLARI BURAYA
        ********
    </fieldset>
</form>

Üstteki şekilde yapabilirsin.
Form örneğine yakın bir örnek bırakıyorum aşağıya başlıklı bir şekilde.

HTML:
<head>
    <style>
    .bg {
  background-color:gray;
}
    </style>
</head>
<form name="" action="" method="">
 <fieldset>
   <legend>Başvuru Form</legend>
<table border="1" style="width:100%">
<tr>
<td class="bg">Adı Soyadı*</td>
<td>
<input type="text" name="" size="45" required/>
</td>
</tr>
<tr>
<td class="bg">Doğum Tarihi *</td>
<td>
<input type="date" name="" style="width:100%" required/>
</td>
</tr>         
<tr>
<td class="bg">Cinsiyet *</td>
<td>
<input type="radio" name="cinsiyet"/> ERKEK
<input type="radio" name="cinsiyet"/> KADIN
</td>
</tr>
<tr>
<td class="bg">E-Posta Adresi *</td>
<td>
<input type="email" name="" size="45" required/>
</td>
</tr>       
<tr>
<td class="bg">Telefon *</td>
<td>
<input type="tel" name="" placeholder="(___)(_______)" size="45" required/>
</td>
</tr>       
<tr>
<td class="bg">Mezuniyet Durumu *</td>
<td>
<input type="radio" name="mezuniyet"/> İlkokul
<input type="radio" name="mezuniyet"/> Ortaokul
<input type="radio" name="mezuniyet"/> Lise
<input type="radio" name="mezuniyet"/> Üniversite             
</td>
</tr>
<tr>
<td class="bg">İngilizce Seviyeniz *</td>
<td>
<select id="" name="" style="width:100%">
<option value="">Seçiniz</option>
<option value="">Bilmiyorum</option>
<option value="">Orta Seviye</option>
<option value="">İleri Seviye</option>
</select>               
</td>
</tr>
<tr>
<td class="bg">Çalışmak İstediğiniz Pozisyon</td>
<td>
<input type="checkbox"> Bilgi İşlem <br />
<input type="checkbox"> Muhasebe <br />
<input type="checkbox"> Pazarlama <br />
<input type="checkbox"> Asistan <br />
</td>
</tr>
<tr>
<td class="bg">Askerlik Durumu</td>
<td>
<select id="" name="" style="width:100%">
<option value="">Seçiniz</option>
<option value="">Tecilli</option>
<option value="">Muaf</option>
<option value="">Yapıldı</option>
</select>               
</td>
</tr>
<tr>
<td class="bg">Ek Bilgi</td>
<td>
<textarea name="" rows="7" style="width: 100%" placeholder="Sizinle ilgili eklemek istediğiniz diğer bilgileri buraya yazabilirsiniz."></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="BAŞVUR"/>
</td>
</tr>             
</table>
  </fieldset>
</form>

Ekran görüntüsü de bu şekilde:
1669619907710.png
 
Çözüm

Yeni konular

Yukarı