CSS Formları

İçindekiler

Bir HTML formunun görünümü CSS ile büyük ölçüde geliştirilebilir:

First Name Last Name Country

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<style>
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
<body>

<h3>Using CSS to style an HTML Form</h3>

<div>
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
  
    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>

Giriş Alanlarını Şekillendirme

Giriş alanının genişliğini belirlemek için width özelliğini kullanın:

First Name

Örnek

input
{
  width: 100%;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
input {
  width: 100%;
}
</style>
</head>
<body>

<h2>A full-width input field</h2>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
</form>

</body>
</html>

Yukarıdaki örnek tüm <input> öğeleri için geçerlidir. Eğer sadece istersen Belirli bir giriş türünü biçimlendirmek için nitelik seçicileri kullanabilirsiniz:

input[type=text]: - yalnızca metin alanlarını seçecektir
input[type=password]: - yalnızca şifre alanlarını seçecektir
input[type=number]: - yalnızca sayı alanlarını seçecektir
: vesaire..

Yastıklı Girişler

Metin alanına boşluk eklemek için padding özelliğini kullanın.

İpucu: Birbiri ardına çok sayıda girişiniz olduğunda, ayrıca daha fazla alan eklemek için bir miktar kenar boşluğu eklemek istiyorum bunların dışında:

First Name Last Name

Örnek

input[type=text]
{
    width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  
box-sizing: border-box;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}
</style>
</head>
<body>

<h2>Padded input fields</h2>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

box-sizing özelliğini şu şekilde ayarladığımızı unutmayın: kenarlık kutusu. Bu, dolgunun ve nihayetinde sınırların dahil edilmesini sağlar. elemanların toplam genişliği ve yüksekliği.
CSS Kutu Boyutlandırma bölümümüzde box-sizing özelliği hakkında daha fazla bilgi edinin.

Kenarlıklı Girişler

Kenarlık boyutunu ve rengini değiştirmek için border özelliğini kullanın ve yuvarlatılmış köşeler eklemek için border-radius özelliğini kullanın:

First Name

Örnek

input[type=text]
{
  border: 2px solid red;
  
border-radius: 4px;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid red;
  border-radius: 4px;
}
</style>
</head>
<body>

<h2>Input fields with borders</h2>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

Yalnızca alt kenarlık istiyorsanız border-bottom özelliğini kullanın:

First Name

Örnek

input[type=text]
{
  border: none;
  
border-bottom: 2px solid red;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid red;
}
</style>
</head>
<body>

<h2>Input fields with bottom border</h2>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

Renkli Girişler

Girişe bir arka plan rengi eklemek için background-color özelliğini kullanın ve metin rengini değiştirmek için color özelliğini kullanın:

Örnek

input[type=text]
{
  background-color: #3CBC8D;
  color: white;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  background-color: #3CBC8D;
  color: white;
}
</style>
</head>
<body>

<h2>Input fields with color</h2>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="John">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

</body>
</html>

Odaklanmış Girişler

Varsayılan olarak, bazı tarayıcılar girişin çevresine mavi bir çerçeve ekleyecektir. odaklanın (üzerine tıklayın). Girişe outline: none; ekleyerek bu davranışı kaldırabilirsiniz.

Odaklanıldığında giriş alanıyla ilgili bir şeyler yapmak için :focus seçiciyi kullanın:

Örnek

input[type=text]:focus
{
  background-color: lightblue;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid #555;
  outline: none;
}

input[type=text]:focus {
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Input fields with color on :focus</h2>

<p>Here, the input field gets a color when it gets focus (clicked on):</p>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="John">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

</body>
</html>

Örnek

input[type=text]:focus
{
  border: 3px solid #555;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
}

input[type=text]:focus {
  border: 3px solid #555;
}
</style>
</head>
<body>

<h2>Input fields with black border on :focus</h2>

<p>Here, the input field gets a black border color when it gets focus (clicked on). We have also added the CSS transition property to animate the border color (takes 0.5 seconds to change the color on focus):</p>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="John">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

</body>
</html>

Simge/resim ile giriş

Girişin içinde bir simge istiyorsanız background-image özelliğini kullanın ve onu background-position ile konumlandırın mülk. Ayrıca simgenin alanını ayırmak için sol tarafa büyük bir dolgu eklediğimize de dikkat edin:

Örnek

input[type=text]
{
  background-color: white;
  background-image: url('searchicon.png');
  
background-position: 10px 10px; 
  background-repeat: 
no-repeat;
  
padding-left: 40px;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>

<h2>Input field with an icon inside</h2>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

Animasyonlu Arama Girişi

Bu örnekte, odaklanıldığında arama girişinin genişliğini canlandırmak için CSS transition özelliğini kullanıyoruz. geçiş özelliği hakkında daha fazla bilgiyi daha sonra CSS Geçişleri bölümümüzde öğreneceksiniz.

Örnek

input[type=text] {
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
    
width: 100%;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}
</style>
</head>
<body>

<h2>Animate width of search input</h2>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

Metin Alanlarını Şekillendirme

İpucu: Metin alanlarının yeniden boyutlandırılmasını önlemek için resize özelliğini kullanın (sağ alt köşedeki "yakalayıcıyı" devre dışı bırakın):

Örnek

textarea
{
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  
box-sizing: border-box;
  border: 2px solid #ccc;
  
border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}
</style>
</head>
<body>

<h2>Styling textarea</h2>

<p><strong>Tip:</strong> Use the resize property to prevent textareas from being resized (disable the "grabber" in the bottom right corner):</p>

<form>
  Some text...&lt;/textarea>
</form>

</body>
</html>

Seçili Menüleri Şekillendirme

Örnek

select
{
  width: 100%;
  padding: 16px 20px;
  
border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Styling a select menu</h2>

<form>
  <select id="country" name="country">
  <option value="au">Australia</option>
  <option value="ca">Canada</option>
  <option value="usa">USA</option>
  </select>
</form>

</body>
</html>

Giriş Düğmelerini Şekillendirme

Örnek

input[type=button], input[type=submit], input[type=reset]
{
  background-color: #04AA6D;
  border: 
none;
  color: white;
  padding: 
16px 32px;
  text-decoration: none;
  
margin: 4px 2px;
  cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=button], input[type=submit], input[type=reset] {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
<body>

<h2>Styling form buttons</h2>

<input type="button" value="Button">
<input type="reset" value="Reset">
<input type="submit" value="Submit">

</body>
</html>

Düğmelere CSS ile nasıl stil uygulanacağı hakkında daha fazla bilgi için CSS Düğmeleri Eğitimimizi okuyun.

Duyarlı Form

Efekti görmek için tarayıcı penceresini yeniden boyutlandırın. Ekranın genişliği 600 pikselden az olduğunda, iki sütunun yan yana olmak yerine üst üste istiflenmesini sağlayın.

Gelişmiş: Aşağıdaki örnekte duyarlı bir form oluşturmak için medya sorguları kullanılmaktadır. Bu konu hakkında daha sonraki bir bölümde daha fazla bilgi edineceksiniz.

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
</style>
</head>
<body>

<h2>Responsive Form</h2>
<p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.</p>

<div class="container">
  <form action="/action_page.php">
  <div class="row">
    <div class="col-25">
      <label for="fname">First Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="fname" name="firstname" placeholder="Your name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="lname">Last Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="country">Country</label>
    </div>
    <div class="col-75">
      <select id="country" name="country">
        <option value="australia">Australia</option>
        <option value="canada">Canada</option>
        <option value="usa">USA</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="subject">Subject</label>
    </div>
    <div class="col-75">
      &lt;textarea id="subject" name="subject" placeholder="Write something.." style="height:200px">&lt;/textarea>
    </div>
  </div>
  <br>
  <div class="row">
    <input type="submit" value="Submit">
  </div>
  </form>
</div>

</body>
</html>

Hizalanmış Form

Yatay hizalanmış bir form oluşturmak için etiketlerin girdilerle birlikte nasıl stillendirileceğine ilişkin bir örnek:

First Name

Middle Name

Last Name

Örnek

select
{
    color: green;
    display: 
inline-block;
    width: 130px;
    
text-align: right;
    padding-right: 15px; 
}

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style> 
.label {
  color: green;
  display: inline-block;
  width: 130px;
  text-align: right;
  padding-right: 15px; 
}

input[type=text] {
  width: 200px;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}
</style>
</head>
<body>

<p>Aligned form:</p>

<form>
  <div>
    <label for="fname10" class="label">First Name</label>
    <input type="text" id="fname10" name="firstname">
  </div>

  <div>
    <label for="mname" class="label">Middle Name</label>
    <input type="text" id="mname" name="lastname">
  </div>

  <div>
    <label for="lname10" class="label">Last Name</label>
    <input type="text" id="lname10" name="lastname">
  </div>
</form>

</body>
</html>