In this Aptana Studio 3 Turkish Tutorial, I will show you make a contact form with CSS. Contact form is the most commonly used type of form in the internet world.
Aptana Studio 3 programın da insanların firmalar veya site sahipleri ile iletişim kurabileceği iletişim formlarından bir tanesinin yapımını göstereceğim. Daha sonraki eğitim videolarında bunlara düğmeler ve seçenekler eklemeyi de videolarım arasına ilave edeceğim.
İhtiyacımız olan bir html bir css sayfaları ile ücretsiz bir adet arkaplanda kullanılacak resim. Tabiki bu sizin tercihinize kalmıştır. Hadi videoya başlayalım.
Kaynak index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Contact Form</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="contact-form">
<form>
<label>Full Name : </label><input type="text" name="name" placeholder='Your Full Name....' />
<label>Email: </label><input type="email" name="email" placeholder='Your Email Adress....' />
<label>Message : </label>textarea>
<button type="submit">Send</button>
</form>
</div>
</div>
</body>
</html>
Kaynak style.css
body{
margin : 0;
padding : 0;
font: 0.8em Tahoma;
background: url(arka.jpg)
}
#container{
width: 500px;
border: 1px solid #ccc;
background: rgb(255,255,255);
position: fixed;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
border-radius: 5px;
}
#contact-form{
padding: 20px;
}
#contact-form label{
width: 100px;
float: left;
padding: 10px;
}
#contact-form input, #contact-form textarea{
width: 300px;
float: :left;
padding: 10px;
border: 1px solid #eee;
border-radius: 3px;
}
#contact-form textarea{
height: 150px;
}
#contact-form input:focus, #contact-form textarea:focus{
box-shadow: 0 0 3px 2px rgba(0,200,255,0.5);
}
#contact-form button{
border: 1px solid #ccc;
padding: 6px;
width: 80px;
border-radius: 5px;
color: #333;
background: #fff;
}
#contact-form button:hover{
background: #0066FF;
}
Bir sonraki aşamada görüşmek üzere…
Githup link: Aptana Studio 3
İndirme Link Sitesi: Aptana Studio 3
Posted on Utopian.io - Rewarding Open Source Contributors