Esnek bir HTML form düzeni nasıl oluşturulur?

-3

aşağıdaki özelliklere sahip bir esnek html formu oluşturmak istiyorum:Esnek bir HTML form düzeni nasıl oluşturulur?

Etiket sağ onun bileşeni üzerinde kalmalıdır (aşağıdaki resim bakınız);
Bileşenler, ekranda en az genişlik yapılandırması bulunan tüm alanı doldurmalı (genişlik boyutu);
Ekran genişliği tüm form bileşenlerine uymuyorsa, bunlar yığılmalıdır; tüm ekran genişliğini

azaltılmış ekran genişliğine

bu sonucu elde etmek daha şık çözüm nedir ile aynı HTML Form doldurma bileşenlerle

HTML Formu, html tablosu kullanmadan ve sadece HTML + CSS kullanmadan?

2016-03-29 Davi

CSS ortam sorgularını kullanmak isteyeceksiniz - https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries –

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    
 
    <title></title> 
 
    
 
</head> 
 
<body> 
 
    <form class="container-fluid"> 
 
<div class="row"> 
 
    <div class="col-md-4 col-xs-6"> 
 
    <label>field 1</label> 
 
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="text1"> 
 
    </div> 
 
    <div class="col-md-4 col-xs-6"> 
 
    <label>field 2</label> 
 
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="text2"> 
 
    </div> 
 
    <div class="col-md-4 col-xs-6"> 
 
    <label>field 3</label> 
 
    <select class="form-control"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
</select> 
 
    </div> 
 
</div> 
 
    
 
    <div class="row"> 
 
    <div class="col-md-6 col-xs-8"> 
 
    <label>field 4</label> 
 
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="text3"> 
 
    </div> 
 
    <div class="col-md-6 col-xs-8"> 
 
    <label>field 6</label> 
 
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="text4"> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <div class="col-md-12 col-xs-12" 
 
    <label>field5</label> 
 
    <textarea class="form-control" rows="3"></textarea> 
 
    </div> 
 
    </div> 
 
<br> 
 
<button type="button" class="btn btn-primary">OK</button> 
 
<button type="button" class="btn btn-info">CANCEL</button> 
 
    </form> 
 
</body> 
 
</html>

(ayrıca this Fiddle bakınız) tüm neyi İstediğiniz en iyi yolu kullanarak, bootstrap'i kullanın, önyükleme pratiği yapmanız gerekecek, burada referans için Bootstrap forms. Mutlu kodlar!

kaynak

2016-03-29 17:22:22 Manish62

Kod ekinden dolayı kabul edildi ve çok iyi yapılandırılmış bir çerçeveden yararlandığından, tekerleği yeniden icat etmekten kaçındığı söylenemez. Teşekkürler @Manish. – Davi

Hoşgeldiniz, Mutlu Kodlama! @Davi – Manish62

Bu yapmalıyım:

.form-group { 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
.form-control { 
 
    padding: 3px; 
 
    box-sizing: border-box; 
 
    float: left; 
 
} 
 

 
.form-control input, 
 
.form-control select, 
 
.form-control textarea { 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
} 
 

 
.form-control textarea { 
 
    resize: vertical; 
 
} 
 

 
#form-group-1 .form-control { 
 
    width: 33.333%; 
 
} 
 

 
#form-group-2 .form-control { 
 
    width: 50%; 
 
} 
 

 
#form-group-3 .form-control { 
 
    width: 100%; 
 
} 
 

 
#form-group-4 .form-control { 
 
    width: 6em; 
 
} 
 

 
@media (max-width: 500px) { 
 
    #form-group-1 .form-control { 
 
     width: 50%; 
 
    } 
 
    
 
    #form-group-2 .form-control { 
 
     width: 66.6666%; 
 
    } 
 
}

<form> 
 
    <div class="form-group" id="form-group-1"> 
 
     <div class="form-control"> 
 
      <label for="field1">Field 1</label> 
 
      <input name="field1" id="field1" placeholder="text1"> 
 
     </div> 
 
     <div class="form-control"> 
 
      <label for="field2">Field 2</label> 
 
      <input name="field2" id="field2" placeholder="text2"> 
 
     </div> 
 
     <div class="form-control"> 
 
      <label for="field3">Field 3</label> 
 
      <select name="field3" id="field3"> 
 
       <option value="1">Option 1</option> 
 
       <option value="2">Option 2</option> 
 
      </select> 
 
     </div> 
 
    </div> 
 
    <div class="form-group" id="form-group-2"> 
 
     <div class="form-control"> 
 
      <label for="field4">Field 4</label> 
 
      <input name="field4" id="field4" placeholder="text4"> 
 
     </div> 
 
     <div class="form-control"> 
 
      <label for="field5">Field 5</label> 
 
      <input name="field5" id="field5" placeholder="text5"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group" id="form-group-3"> 
 
     <div class="form-control"> 
 
      <label for="field6">Field 6</label> 
 
      <textarea name="field6" id="field6"></textarea> 
 
     </div> 
 
    </div> 
 
    <div class="form-group" id="form-group-4"> 
 
     <div class="form-control"> 
 
      <input type="submit" value="OK" /> 
 
     </div> 
 
     <div class="form-control"> 
 
      <input type="button" value="CANCEL" /> 
 
     </div> 
 
    </div> 
 
</form>

kaynak

2016-03-29 15:49:23

Bu çözüm, herhangi bir dış bağımlılığa ihtiyaç duymadığı için Thumbs up. Teşekkür ederim John-slegers. – Davi

Esnek bir HTML form düzeni nasıl oluşturulur?

cevap

İlgili konular