<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Forms</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container">
<form style="width: 30rem;">
<h3>Bilgilerinizi Giriniz</h3>
<hr />
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" id="email" class="form-control">
<!-- inputların altına yazılan küçük bilgi yazıları -->
<small class= "form-text text-danger">*Please provide a email</small>
</div>
<!-- ListBox -->
<div class="form-group">
<label for="language">Diller</label>
<select id="language" class="form-control">
<option>Türkçe</option>
<option selected>İngilizce</option>
<option>Almanca</option>
</select>
</div>
<!-- TextArea -->
<div class="form-group">
<label for="message">Mesajınız</label>
<textarea class="form-control" name="message" id="message" rows="5"></textarea>
</div>
<!-- CheckBox -->
<div class="form-group">
<div class="form-check">
<input type="checkbox" name="accept" id="accept" class="form-check-input">
<label for="accept" class="form-check-text">Satış sözleşmesini Okudum</label>
</div>
</div>
<!-- Alt alta değil de Yan yana gelmesini istiyorsak -->
<div class="form-row">
<div class="col-md-6">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" id="email" class="form-control">
<small class= "form-text text-danger">*Please provide a email</small>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Gönder</button>
</form>
</div>
</body>
</html>
Yorum bırakın