İçeriğe geç

Div, Span, HTML Form Elemanları

Tarih: 14 Mart 2018 | Yazar: civa

Div, Span, HTML Form Elemanları

  • Div
  • Span
  • Form Input
  • Form Radio
  • Form Kullanıcı Girişi, Checkbox
  • Form Fieldset
  • Form Select
  • Form Textarea
  • Form Disabled, Hidden, Readonly, Placeholder
  • Form Number, Range
  • Form Date, Color, Email
  • Form File (Dosya yükleme)
  • Form Telefon Bağlantısı

Derste Yapılan Örnekleri İndir

Div

<!doctype html>
<html>
	<head>
		<title>Hafta 7 - Div</title>
		<style>
			.yana_yatik{
				font-style:italic;
				background-color:#CCC;
			}
			#hep_burada{
				right:50px;
				bottom:10px;
				position:fixed;
				background-color:#6b5b95;
				color:#feb236;
				font-family:arial;
				text-align:center;
			}
		</style>
	</head>
	<body>
		<h1 id="yukarisi">Başlık</h1>
		<p>Yukarıda güzel bir başlık var. Bu da paragrafı.</p>
		<div class="yana_yatik">
			<h1>Bu da başka bir başlık</h1>
			<p>Yukarıdaki başlık pek olmadı sanki</p>
		</div>
		<div id="hep_burada">
			Ben hep buradayım. <hr><a href="#yukarisi">Yukarı Çıkmak İstersen Tıkla</a>
		</div>
		<hr>
		<br>
		a<br>
		a<br>
		a<br>
		a<br>
		b<br>
		b<br>
		b<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		c<br>
		c<br>
		c<br>
		c<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		e<br>
		e<br>
		e<br>
		e<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		a<br>
		t<br>
		t<br>
		t
		y<br>
		y<br>
		y<br>
		y<br>
		<br>
		ı<br>
		ı<br>
		ı<br>
		ı<br>
		ı<br>
		<br>
		p<br>
		p<br>
		p<br>
		p<br>
		<br>
		<br>
		8<br>
		8<br>
		8<br>
		8<br>
	</body>
</html>

Span

<!doctype html>
<html>
	<head>
		<title>Hafta 7 - Span</title>
		<style>
			.soru_belirteci{
				font-style:italic;
				background-color:#000;
				color:#fff;
				text-decoration:underline;
				font-weight:bold;
			}
		</style>
	</head>
	<body>
		<p>
			Sorumuz ne olsun <span class="soru_belirteci">acaba?</span>
		</p>
		<p>
			Yukarıdakilerden hangisinin yazımı <span class="soru_belirteci">yanlıştır?</span>
		</p>
	</body>
</html>

Form Input

<!doctype html>
<html>
	<head>
		<title>Hafta 7 - Form</title>
		<style>

		</style>
	</head>
	<body>
		<form>
			Adınız
			<input type="text">
			<hr>
			Soyadınız
			<input type="text">
			<hr>
			<input type="submit">
			<input type="reset">
		</form>
	</body>
</html>

Form Radio

<!doctype html>
<html>
	<head>
		<title>Hafta 7 - Form - 2</title>
		<style>

		</style>
	</head>
	<body>
		<form>
			Adınız
			<input type="text">
			<hr>
			Soyadınız
			<input type="text">
			<hr>
			Bayan<input type="radio" name="cinsiyet">&nbsp;
			Bay<input type="radio" name="cinsiyet">
			<hr>
			<input type="submit" value="Gönder">
			<input type="reset" value="Temizle">
		</form>
	</body>
</html>

Form Checkbox

<!doctype html>
<html>
	<head>
		<title>Hafta 7 - Form - 2</title>
		<style>

		</style>
	</head>
	<body>
		<form method="POST" action="kullanici_giris.php">
			Kullanıcı Adınız
			<input type="text" name="kullanici_adi">
			<hr>
			Şifreniz
			<input type="password" name="sifre">
			<hr>
			Beni unutma <input type="checkbox" name="unutma">
			<hr>
			<input type="submit" value="Gönder">
			<input type="reset" value="Temizle">
		</form>
	</body>
</html>

Form Fieldset

<!doctype html>
<html>
	<head>
		<title>Hafta 7 - Form - 2</title>
		<style>

		</style>
	</head>
	<body>
		<form method="POST" action="kullanici_giris.php">
			<fieldset>
				<legend>Kullanıcı Giriş Formu</legend>
				Kullanıcı Adınız
				<input type="text" name="kullanici_adi">
				<hr>
				Şifreniz
				<input type="password" name="sifre">
				<hr>
				Beni unutma <input type="checkbox" name="unutma">
				<hr>
				<input type="submit" value="Gönder">
				<input type="reset" value="Temizle">
			</fieldset>
		</form>
	</body>
</html>

Form Select

<!doctype html>
<html>
	<head>
		<title>Hafta 7 - Form - 2</title>
		<style>

		</style>
	</head>
	<body>
		<form method="POST" action="kullanici_giris.php">
			<fieldset>
				<legend>Kullanıcı Giriş Formu</legend>
				Kullanıcı Adınız
				<input type="text" name="kullanici_adi">
				<hr>
				Şifreniz
				<input type="password" name="sifre">
				<hr>
Birim
<select name="birim">
	<option>Mühendislik</option>
	<option>Mimarlık</option>
	<option>Sağlık</option>
	<option>Yönetim</option>
</select>
				<hr>
Birim (Sağlık Seçili)
<select name="birim_2">
	<option>Mühendislik</option>
	<option>Mimarlık</option>
	<option selected>Sağlık</option>
	<option>Yönetim</option>
</select>
				<hr>
Birim (Liste Şeklinde)
<select name="birim_3" size="3">
	<option>Mühendislik</option>
	<option>Mimarlık</option>
	<option>Sağlık</option>
	<option>Yönetim</option>
</select>
				<hr>
Birim (Liste Şeklinde - Birden fazla seçilebilir(CTRL ile))
<select name="birim_3" size="3" multiple>
	<option>Mühendislik</option>
	<option>Mimarlık</option>
	<option>Sağlık</option>
	<option>Yönetim</option>
</select>
				<hr>
				Beni unutma <input type="checkbox" name="unutma">
				<hr>
				<input type="submit" value="Gönder">
				<input type="reset" value="Temizle">
			</fieldset>
		</form>
	</body>
</html>

Form Textarea

<!doctype html>
<html>
	<head>
		<title>Hafta 7 - Form - 2</title>
		<style>

		</style>
	</head>
	<body>
		<form method="POST" action="kullanici_giris.php">
			Kullanıcı Adınız
			<input type="text" name="kullanici_adi">
			<hr>
Açıklama
<textarea>

</textarea>
			<hr>
Açıklama
<textarea>
buraya açıklama yaz
</textarea>
			<hr>
Açıklama (Stilli)
<textarea style="width:500px; height:500px; font-style:italic">

</textarea>
			<hr>
			Beni unutma <input type="checkbox" name="unutma">
			<hr>
			<input type="submit" value="Gönder">
			<input type="reset" value="Temizle">
		</form>
	</body>
</html>

Form Disabled, Hidden, Readonly, Placeholder

<!doctype html>
<html>
	<head>
		<title>Hafta 7 - Form - 2</title>
		<style>

		</style>
	</head>
	<body>
		<form method="POST" action="kullanici_giris.php">
			<input 
				type="text" 
				name="kullanici_adi"
				placeholder="Kullanıcı Adınız"
			>
			<hr>
Veri Girişi Yapılamayan Form Elemanı
<input type="text" disabled>
			<hr>
Görünmeyen Form Elemanı
<input type="hidden" value="35" name="sehir">
			<hr>
Varsayılan Değeri Olan Form Elemanı
<input 
	type="text" 
	name="kullanici_adi"
	value="huseyingunes"
>
			<hr>
			Şifreniz
			<input type="password" name="sifre" readonly>
			<hr>
Beni unutma <input type="checkbox" name="unutma" checked>
			<hr>
			<input type="submit" value="Gönder">
			<input type="reset" value="Temizle">
		</form>
	</body>
</html>

Form Number, Range

<!doctype html>
<html>
	<head>
		<title>Hafta 7 - Number, Range</title>
		<style>

		</style>
	</head>
	<body>
		<form method="POST" action="">
		Seçim Aralığı Form Elemanı
			<input type="range" >
			<hr>
		Sayı Girişi
			<input type="number" value="30">
			<hr>
		Belirli bir Aralıkta Sayı Girişi
			<input type="number" value="30" min="28" max="32">
			<hr>
		</form>
	</body>
</html>

Form Date, Color, Email

<!doctype html>
<html>
	<head>
		<title>Hafta 7 - Renk, Tarih, Eposta</title>
		<style>

		</style>
	</head>
	<body>
		<form method="POST" action="">
		Renk
			<input type="color">
			<hr>
			Tarih
			<input type="date">
			<hr>
			Eposta
			<input type="email">
			<hr>
			<input type="submit" value="Gönder">
		</form>
	</body>
</html>

Form File (Dosya yükleme)

<!doctype html>
<html>
	<head>
		<title>Hafta 7 - Renk, Tarih, Eposta</title>
		<style>

		</style>
	</head>
	<body>
		<form method="POST" action="">
		Dosya seçiniz
			<input type="file">
			<hr>
			<input type="submit" value="Gönder">
		</form>
	</body>
</html>

Form Telefon Bağlantısı

<!doctype html>
<html>
	<head>
		<title>Hafta 7 - Renk, Tarih, Eposta</title>
		<style>

		</style>
	</head>
	<body>
		<a href="tel:02662223344">Telefonla Ara</a>
	</body>
</html>
1.971 Gösterim  
Tarih:DersGenelinternet programlamamühendislikmühendislik fakültesiprogramlamaweb programlama

Tek Yorum

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

This site uses Akismet to reduce spam. Learn how your comment data is processed.