<html>
<head>
<title>Form</title>
</head>
<body>
<h2 style="margin:auto">Identitas Mahasiswa</h2>
<form>
<table>
<tr>
<td>NIM</td>
<td>:</td>
<td><input type="text" placeholder="16111003"></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type="text" style="width: 300px" placeholder="Addzifi Moch G"></td>
</tr>
<tr>
<td>Gender</td>
<td>:</td>
<td><input type="radio" name="gender">Laki-laki <input type="radio" name="gender">Perempuan</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea cols="30" rows="5"></textarea></td>
</tr>
<tr>
<td>Prodi</td>
<td>:</td>
<td>
<select name="Prodi">
<option>Teknik Informatika</option>
<option>Sistem Informasi</option>
</select>
</td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td><input type="checkbox">Baca buku
<input type="checkbox">Jalan-jalan
<input type="checkbox">Main Game
<input type="checkbox">Tidur</td>
</tr>
<tr>
<td>Photo</td>
<td>:</td>
<td><img src="zivi.jpg" style="width: 100px;height: 100px"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit"><input type="reset"></td>
</tr>
</table>
</form>
</body>
</html>
Form Dengan Style
<html>
<head>
<style type="text/css">
h2{
margin: auto;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit],input[type=reset] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit],input[type=reset]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
width: 500px;
margin: auto;
}
.container h2{
font-size: 48px;
color: rgb(6, 106, 117);
padding: 2px 0 10px 0;
font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
font-weight: bold;
text-align: center;
}
.col-20 {
float: left;
width: 20%;
margin-top: 6px;
}
.col-80 {
float: left;
width: 80%;
margin-top: 6px;
}
.row:after {
content: "";
display: table;
clear: both;
}
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<h2>IDENTITAS MAHASISWA</h2>
<form action="login.php">
<div class="row">
<div class="col-20">
<label>NIM</label>
</div>
<div class="col-80">
<input type="text" placeholder="16111003">
</div>
</div>
<div class="row">
<div class="col-20">
<label for="lname">Nama</label>
</div>
<div class="col-80">
<input type="text" placeholder="Addzifi Mochamad Gumelar">
</div>
</div>
<div class="row">
<div class="col-20">
<label>Gender</label>
</div>
<div class="col-80">
<input type="radio" name="gender">Laki-laki
<input type="radio" name="gender">Perempuan
</div>
</div>
<div class="row">
<div class="col-20">
<label>Alamat</label>
</div>
<div class="col-80">
<textarea></textarea>
</div>
</div>
<div class="row">
<div class="col-20">
<label>Prodi</label>
</div>
<div class="col-80">
<select>
<option>Teknik Informatika</option>
<option>Sistem Informasi</option>
</select>
</div>
</div>
<div class="row">
<div class="col-20">
<label>Hobby</label>
</div>
<div class="col-80">
<input type="checkbox">Baca Buku
<input type="checkbox">Jalan-jalan
<input type="checkbox">Main Game
<input type="checkbox">Tidur
</div>
</div>
<div class="row">
<div class="col-20">
<label>Photo</label>
</div>
<div class="col-80">
<img src="zivi.jpg">
</div>
</div>
<div class="row">
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
Tabel
<html>
<head>
<title>Table</title>
<style type="text/css">
th{
background-color: #ffa500;
color: white;
}
tr:nth-child(even){
background-color: #f2f2f2
}
th, td{
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>
No.
</th>
<th>
NIM
</th>
<th>
Nama
</th>
<th>
Prodi
</th>
</tr>
<tr>
<td>
1
</td>
<td>
16111003
</td>
<td>
Addzifi Moch G
</td>
<td>
Teknik Informatika
</td>
</tr>
<tr>
<td>
2
</td>
<td>
16111029
</td>
<td>
Apit Suryanti
</td>
<td>
Teknik Informatika
</td>
</tr>
</table>
</body>
</html>
0 Komentar untuk "Membuat Form dan Table dengan HTML dan CSS"