css form örneği | FARKLI TARZ FARKLI İMAJ
Kapat

css komutlarımızı kullanarak bir form örneği hazırlayalım.

bu örneğimizde bağlantılılı css kullanacağız.

css ve html dosyalarımız ayrı ayrı hazırlayıp html dosyamıza css dosyamızı entegre edeceğiz.

ilk olarak css komutlarımızı yazalım.

style.css adında bir dosya oluşturdum ben.

 

css kod:

 

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

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

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

div
{
border-radius: 5px;
background-color: yellow;
padding: 20px;
}

 

evet stil tanımlamalarımızı yaptık şimdide html kodlarını yazalım.

 

html kod:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="tr">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-9">
<meta name="title" content="form örneği" />
<title> form örneği </title>
<link rel=stylesheet href=”style.css” type=”text/css”>
</head>
<body>
<h1> sadık özdoğan form tasarımı </h1>

<div>
<form action="sadikozdogan.com">
<label for="ad">Adınız</label>
<input type="text" id="ad" name="ad" placeholder="Adınız..">

<label for="soyad">Soyadınız</label>
<input type="text" id="soyad" name="soyad" placeholder="Soyadınız..">

<label for="ilgialan">ilgialanınız hangi dildir</label>
<select id="ilgialan" name="ilgialan">
<option value="php">php</option>
<option value="asp">asp</option>
<option value="python">python</option>
</select>

<input type="submit" value="Submit">
</form>
</div>

</body>
</html>

 

burada 2 text kutusu birte select ve submit butonu olmak üzere 4 öğeden oluşan basit bir form hazırladık.

yukarıya baktığınızda css tanımlamamızda tüm öğlerin tanımlaması yapılmıştır.

farklı örnekler hazırlayıp sunacağım en kısa zamanda.

iyi bloglamalar herkese.

Bir önceki yazımız olan dikey menü yapımı başlıklı makalemizde css dikey menü yapımı, css kod örnekleri ve css menü yapımı hakkında bilgiler verilmektedir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

code


Kapat