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 name="message" placeholder='Your Message...'></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
Interesting post
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thanks bro :)
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you for return...
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Hey @tarikhakan55 I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit