“Daftar Formulir HTML” Kode Jawaban

Daftar Formulir HTML

// HTML
<form action="action_page.php" style="border:1px solid #ccc">
  <div class="container">
    <h1>Sign Up</h1>
    <p>Please fill in this form to create an account.</p>
    <hr>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <label for="psw-repeat"><b>Repeat Password</b></label>
    <input type="password" placeholder="Repeat Password" name="psw-repeat" required>

    <label>
      <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
    </label>

    <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>

    <div class="clearfix">
      <button type="button" class="cancelbtn">Cancel</button>
      <button type="submit" class="signupbtn">Sign Up</button>
    </div>
  </div>
</form>

// CSS
* {box-sizing: border-box}

/* Full-width input fields */
  input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}

/* Set a style for all buttons */
button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

button:hover {
  opacity:1;
}

/* Extra styles for the cancel button */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}

/* Add padding to container elements */
.container {
  padding: 16px;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
    width: 100%;
  }
}
Homemadesteam58

cara membuat halaman pendaftaran di html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style media="screen">
  @import url('https://fonts.googleapis.com/css?family=Open+Sans');

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}

.wrapper{
width: 100%;
height: 100vh;
background: url("http://driving-tests.org/wp-content/uploads/2012/03/night-road.jpg") no-repeat top center;
background-size: cover;
}

.loginform{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
max-width: 380px;
width: 100%;
height: auto;
border-radius: 5px;
padding: 40px 30px 40px 0;
box-shadow: -4px -4px 11px #c8c2c2a2,
            4px 4px 9px rgba(147, 149, 151, 0.871);
}

.loginform .title{
font-size: 32px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
color: #c9c3cd;
margin-bottom: 35px;
}

.input-form{
margin-bottom: 35px;
position: relative;
}

.input-form .input{
width: 100%;
padding: 16px;
padding-left: 80px;
font-size: 18px;
text-align: center;
border: transparent;
color: #fff;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background: rgba(105, 105, 105, 0.55);

outline: none;
}

.input-form:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 100%;
background: #bfb7b7;
}

.input-form:before{
content: "";
position: absolute;
top: 6px;
left: 70px;
width: 2px;
height: 80%;
background: #d4cfd9;
}

.btn{
width: 200px;
background: rgba(163, 159, 159, 0.55);
margin: 0 auto;
text-align: center;
border-radius: 5px;
padding: 12px;
}

.btn a{
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 24px;
}

.input-form .fas{
position: absolute;
top: 18px;
left: 35px;
font-size: 20px;
color: #fff;
}


::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #fff;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #fff;
}
:-ms-input-placeholder {
/* IE 10+ */
color: #fff;
}
  </style>
</head>
<body>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">

  <div class="wrapper">
    <div class="loginform">
        <div class="title">
            Login form
        </div>
        <div class="input-form username">
            <input type="text" class="input" placeholder="Username">
            <i class="fas fa-user"></i>
        </div>
        <div class="input-form email">
            <input type="text" class="input" placeholder="Email address">
            <i class="fas fa-at"></i>
        </div>
        <div class="input-form password">
            <input type="password" class="input" placeholder="Password">
            <i class="fas fa-key"></i>
        </div>
        <div class="btn">
          <a href="#">login</a>
        </div>
    </div>
  </div>
</body>
</html>
Babar Ali

Jawaban yang mirip dengan “Daftar Formulir HTML”

Pertanyaan yang mirip dengan “Daftar Formulir HTML”

Lebih banyak jawaban terkait untuk “Daftar Formulir HTML” di HTML

Jelajahi jawaban kode populer menurut bahasa

Jelajahi bahasa kode lainnya