PWPB | Pertemuan 11
CSS Pada Elemen Form
Pengertian CSS
CSS adalah salah satu dokumen untuk membuat website yang berguna untuk mengatur gaya atau mengubah gaya tampilan website agar lebih menarik.
CSS Pada elemen Form meliputi
- Jenis Border
- Warna Border
- Lebar Form
- Batas Form Dari sisi layout
- Warna Background Pada Form
1. Pengaturan Pada Form Text Area
a. CSSonForm1.html (File HTML)
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<link rel="stylesheet" type="text/css" href="ExternalCSSForm.css">
<body>
<form name="form1" method="post" action="">
<table>
<tr>
<td width="50">Nama</td>
<td width="175"><textarea name="textarea" cols="50"> </textarea></td>
</tr>
<tr>
<td width="50">Pesan</td>
<td width="175"><textarea name="textarea" cols="50" rows="14"></textarea></td>
</tr>
</table>
</form>
</body>
</html>
ExternalCSSonForm1.html (File CSS)
form{
border: 2px dashed lawngreen;
width: 70%;
margin-left: 0px;
background-color: azure;
color: blueviolet;
font-family: Arial, Helvetica, sans-serif;
}
body{
background-color: salmon;
}
Hasil Kodingan di atas
b. CSSonForm2.html (File HTML)
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<link rel="stylesheet" type="text/css" href="ExternalCSSForm2.css">
<body>
<form name="form1" method="post" action="">
<table bordercolor="1">
<tr>
<td width="50">Nama</td>
<td width="175"><textarea name="textarea" cols="50"> </textarea></td>
</tr>
<tr>
<td width="50">Pesan</td>
<td width="175"><textarea name="textarea" cols="50" rows="14"></textarea></td>
</tr>
</table>
</form>
</body>
</html>
ExternalCSSonForm2.css (File CSS)
textarea{
color: cyan;
background-color: : blue;
font-family: lucida handwriting;
}
body{
color: blue;
background-color: grey;
font-family: arial narrow;
}
Hasil Kodingan di atas
c. CSSonForm3.html (File HTML)
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<link rel="stylesheet" type="text/css" href="ExternalCSSForm3.css">
<body>
<form name="form1" method="post" action="">
<table>
<tr>
<td width="58">Nama</td>
<td width="230">: <input type="text" name="nama"></td>
</tr>
<tr>
<td width="58">Alamat</td>
<td width="230">: <input type="text" name="alamat"></td>
</tr>
</table>
</form>
</body>
</html>
ExternalCSSonForm3.css (File CSS)
input{
color: #250BCC;
background: yellow ;
border-color: lawngreen ;
border-top: 0px solid;
border-bottom: 2px dotted brown;
border-left: 0px solid;
border-right: 0px solid;
font-family: fuchsia;
font-size: 11px;
}
Hasil Kodingan di atas
a. CSSonButton.html (File HTML)
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<link rel="stylesheet" type="text/css" href="ExternalCSSOnButton.css">
<body>
<form name="form1" method="post" action="">
<table>
<tr>
<td width="58">Nama</td>
<td width="230"><input type="text" name="nama"></td>
</tr>
<tr>
<td width="58">Alamat</td>
<td width="230"><input type="text" name="alamat"></td>
</tr>
<tr>
<td></td>
<td><input class="button" type="submit" name="submit" value="simpan"> <input class="button" type="submit" name="submit2" value="submit"></td>
</tr>
</table>
</form>
</body>
</html>
ExternalCSSonButton.css (File CSS)
input.button{
color: #250BCC;
background: lightblue;
border-color: white;
border-bottom-color: black;
border-top: 2px outset;
border-bottom: 2px outset;
border-right: 2px outset;
border-left: 2px outset;
font-family: TimesNewRoman;
font-size: 12px;
}
body{
color: lightcoral;
}
Hasil Kodingan di atas
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<link rel="stylesheet" type="text/css" href="ExternalCSSOnButtonHover.css">
<body>
<form name="form1" method="post" action="">
<table>
<tr>
<td width="58">Nama</td>
<td width="230"><input type="text" name="nama"></td>
</tr>
<tr>
<td width="58">Alamat</td>
<td width="230"><input type="text" name="alamat"></td>
</tr>
<tr>
<td></td>
<td><input class="button" type="submit" name="submit" value="simpan"> <input class="button" type="submit" name="submit2" value="submit"><br><br>
<a href="CSSOnButtonHover.html" class="link">Kembali</a>
</td>
</tr>
</table>
</form>
</body>
</html>
ExternalCSSonButtonHover.css (File CSS)
input.button{
color: coral;
background: lime;
border: 2px yellowgreen outset;
font-family: arial, cambria, times;
font-size: 14px;
font-weight: bold;
width: auto;
}
input.button:hover{
color: coral;
background: limegreen;
border: 3px chartreuse inset;
font-family: arial, cambria, times;
font-size: 14px;
font-weight: bold;
width: auto;
}
body{
background-color: pink;
}
a.link{
background-image:url(biru.gif);
text-decoration: none;
font-family: impact;
}
a.link:hover{
background-image:url(red.gif); ;
color: coral;
text-decoration: none;
font-family: arial black;
}
Hasil Kodingan di atas :
Hover Button
Hover Link
c. CSSonRadioButton.html (File HTML)
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<link rel="stylesheet" type="text/css" href="ExternalCSSOnRadioButton.css">
<body>
<form name="form1" method="post" action="" class="f1">
<table bordercolor=1>
<tr width="120">
<td width="98">Jenis Kelamin</td>
<td width="150">: <input type="radio" name="radiobutton" value="radiobutton" class="rb1">Pria</td>
</tr>
<tr>
<td width="58"> </td>
<td width="150" class="kl">: <input type="radio" name="radiobutton" value="radiobutton" class="rb2">Wanita</td>
</tr>
</table>
</form>
</body>
</html>
ExternalCSSonRadioButton.css (File CSS)
input.rb1{
color: black;
background: dodgerblue;
border-color: lime;
font-family: verdana;
font-size: 12px;
}
input.rb2{
color: red;
background: coral;
border-color: yellow;
font-family: verdana;
font-size: 12px;
}
td{
color: midnightblue;
background: bisque;
border-color: yellow;
font-family: verdana;
font-size: 12px;
}
form.f1{
background: sienna;
}
Hasil kodingan di atas
Praktik atau Quiz CSS Pada Form
File HTML
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<link rel="stylesheet" type="text/css" href="ExternalQuiz.css">
<body>
<div class="video-container">
<video playsinline autoplay muted loop id="bgvid">
<source src="../Assets/bg.mp4" type="video/mp4">
</video>
</div>
<div class="shadow">
<form name="form1" method="post" action="" class="f1">
<fieldset>
<legend>Formulir Pendaftaran Calon Peserta</legend>
<table width="100%">
<tr>
<td>Nama</td>
<td><input type="text" name="nama"></td>
</tr>
<tr>
<td>No. Induk Penduduk</td>
<td><input type="text" name="induk"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td><input type="radio" name="radiobutton" value="radiobutton" class="rb1">Pria<input type="radio" name="radiobutton" value="radiobutton" class="rb2">Wanita </td>
</tr>
<tr>
<td>TTL</td>
<td><input type="text" name="ttl"></td>
</tr>
<tr>
<td>Agama</td>
<td>
<select>
<option>Islam</option>
<option>Kristen</option>
<option>Buddha</option>
<option>Hindu</option>
<option>Khonghuchu</option>
</select>
</td>
</tr>
<tr>
<td>Status</td>
<td>
<select>
<option>Sudah Kawin</option>
<option>Belum Kawin</option>
</select>
</td>
</tr>
<tr>
<td><input class="button" type="submit" name="Browse" value="Simpan"> <input class="button" type="submit" name="submit" value="Batal"></td>
</tr>
</table>
</fieldset>
</form>
</div>
</body>
</html>
File CSS
.video-container {
position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: -1;
}
video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
.video-container::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #1b1b1b;
opacity: 0.8;
}
.shadow{
position: relative;
margin-left: 420px;
width: 800px;
height: 450px;
background: linear-gradient(0deg,#000,#262626);
margin-top: 20px;
}
.shadow:before,.shadow:after{
content: '';
position: absolute;
top: -2px;
left: -2px;
background: linear-gradient(4deg,#fb0094,#0000ff,#00ff00,#ffff00,#ff0000,#fb0094,#0000ff,#00ff00,#ffff00,#ff0000);
background-size: 400%;
width: calc(100% + 4px);
height: calc(100% + 4px);
z-index: -1;
animation: animate 20s linear infinite;
}
.shadow:after {
filter: blur(10px);
}
@keyframes animate{
0%
{
background-position: 0 0;
}
50%
{
background-position: 300% 0;
}
100%
{
background-position: 0 0;
}
}
legend{
background-color:cyan;
color: black;
font-size: 17px;
}
fieldset{
border: 2px dashed blueviolet;
}
form.f1{
background: transparent;
color: cyan;
font-family: Arial;
font-size: 16px;
padding: 20px;
}
input{
font-family: Times;
font-size: 14px;
color: black;
border-color: blueviolet;
}
input.rb1{
background-color: dodgerblue;
color: black;
}
input.rb2{
background-color: orange;
color: black;
}
input.button{
font-family: Arial, Helvetica, sans-serif;
color: salmon;
background: blueviolet;
border: 2px solid cyan ;
}
input.button:hover{
font-family: Arial, Helvetica, sans-serif;
color: salmon;
background: cyan;
border: 2px solid blueviolet;
font-weight: bold;
}
input[type="text"] {
width: 80%;
}
tr {
margin-bottom: 20px;
}
Hasil Kodingan di atas :
Catatan : Rekomendasi 720p agar jelas
0 Comments