Created
March 20, 2020 13:42
-
-
Save ademilter/3aeeb4b4bbc72307850e00d9ca32ee8c to your computer and use it in GitHub Desktop.
7) form elemanlarını stillendirelim
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title>Form ve Elemanları</title> | |
<link rel="stylesheet" href="main.css" /> | |
</head> | |
<body> | |
<!-- | |
- adı * | |
- telefon * | |
- email * | |
- mesaj | |
- yaşadığı şehir | |
- cinsiyet | |
reset ve submit POST:https://httpbin.org/post | |
--> | |
<form action="https://httpbin.org/post" method="POST"> | |
<input type="hidden" value="s-500" name="product" /> | |
<div class="form-row"> | |
<label for="adi">Adı</label> | |
<input | |
name="adi" | |
id="adi" | |
type="text" | |
required | |
placeholder="Ahmet Yılmaz" | |
/> | |
</div> | |
<div class="form-row"> | |
<label for="tel">Telefon</label> | |
<input name="tel" id="tel" type="tel" required /> | |
</div> | |
<div class="form-row"> | |
<label for="email">Email</label> | |
<input name="email" id="email" type="email" required /> | |
</div> | |
<div class="form-row"> | |
<label for="mesaj">Mesaj</label> | |
<textarea name="mesaj" id="mesaj" rows="3"></textarea> | |
</div> | |
<div class="form-row"> | |
<label for="sehir">Şehir</label> | |
<select name="sehir" id="sehir"> | |
<option value="34">İstanbul</option> | |
<option value="35" selected>İzmir</option> | |
</select> | |
</div> | |
<div class="form-row"> | |
<p>Sevdiğiniz Renk</p> | |
<div class="radio-container"> | |
<label | |
><input type="radio" name="renk" value="kirmizi" checked /> | |
Kırmızı</label | |
> | |
<label><input type="radio" name="renk" value="yesil" /> Yeşil</label> | |
</div> | |
</div> | |
<div class="form-row"> | |
<button type="reset">Sıfırla</button> | |
<button type="submit">Gönder</button> | |
</div> | |
</form> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-family: Arial, Helvetica, sans-serif; | |
font-size: 16px; | |
} | |
form { | |
padding: 40px; | |
width: 260px; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.form-row { | |
margin-bottom: 20px; | |
} | |
.form-row > label { | |
display: block; | |
margin-bottom: 6px; | |
} | |
input[type="text"], | |
input[type="tel"], | |
input[type="email"], | |
select, | |
button, | |
textarea { | |
width: 100%; | |
border-radius: 5px; | |
height: 42px; | |
border: 1px solid rgba(0, 0, 0, 0.2); | |
padding-left: 15px; | |
padding-right: 15px; | |
font-size: inherit; | |
font-family: inherit; | |
background-color: white; | |
} | |
input[type="text"]::placeholder, | |
input[type="tel"]::placeholder, | |
input[type="email"]::placeholder, | |
textarea::placeholder { | |
color: rgb(175, 175, 175); | |
} | |
input[type="text"]:focus, | |
input[type="tel"]:focus, | |
input[type="email"]:focus, | |
textarea:focus { | |
border-color: rgb(68, 176, 255); | |
} | |
textarea { | |
height: 60px; | |
padding-top: 10px; | |
padding-bottom: 10px; | |
min-height: 42px; | |
max-height: 200px; | |
resize: vertical; | |
} | |
select { | |
-webkit-appearance: none; | |
background-image: url("arrow-down.svg"); | |
background-repeat: no-repeat; | |
background-position: right 10px center; | |
} | |
.radio-container label { | |
display: inline-block; | |
} | |
.radio-container label + label { | |
margin-left: 20px; | |
} | |
button { | |
display: inline-block; | |
width: auto; | |
border: 0; | |
background-color: #eee; | |
} | |
button[type="submit"] { | |
margin-left: 10px; | |
color: white; | |
background-color: rgb(68, 176, 255); | |
} |
Hocam kullandığınız svg ıconu ekleme şansınız var mı?Gece gece bulamadım sizinkine benzeyen bir iconu.
Aşağıda ki adresten iconların tamamına buradan erişebilirsin
https://heroicons.com/
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hocam kullandığınız svg ıconu ekleme şansınız var mı?Gece gece bulamadım sizinkine benzeyen bir iconu.