Form are the main components in any websites. Forms are interface between the user and the server. If there are no forms then there is no interaction between the user and the server. There are a plenty of form element types in HTML. Here I will take a few of them and create a simple Sign up form. So let's get started.
formelements.html
<!DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<link rel="stylesheet" type="text/css" href="formelements.css">
</head>
<body>
<div id="container">
<form method="post" action="formelements.html">
<label>SignUp</label><br><br>
<input type="text" placeholder="Username" class="textBox"/><br>
<input type="email" placeholder="Email" class="textBox" /><br>
<input type="password" placeholder="Password" class="textBox" /><br><br>
<input type="radio" name="gender" class="radioBtn" /> <span class="outsideText">Male</span>
<input type="radio" name="gender" class="radioBtn" /> <span class="outsideText">Female</span><br>
<input type="checkbox" class="checkBox" /> <span class="outsideText">I agree to the terms and
conditions of this website. This is some dummy lorem Ipsum text.</span><br>
<input type="submit" value="Sign up" id="submitBtn" />
</form>
</div>
</body>
</html>
formelements.css
form {
width:500px;
padding:8px;
border:1px solid #cccccc;
}
label {
font-size:24px;
font-family:calibri;
color:red;
text-shadow:2px 2px 1px #cccccc;
padding:6px;
font-weight:700;
}
.textBox {
width:320px;
padding:10px;
font-size:18px;
font-family:calibri;
outline:none;
border:4px solid #00bbaf;
}
.outsideText {
font-size:18px;
font-family:calibri;
}
#submitBtn {
width:160px;
padding:6px;
background:orange;
border:1px solid orange;
color:#ffffff;
font-size:18px;
font-family:calibri;
margin-top:6px;
}
The form looks in this way
Here due to image resolution the image looks pretty much dim. Trust me if you copy and paste the code and check in your screens it looks more pretty, Again play with all the different styles above, try changing the values. If any doubts don't hesitate to comment below. I am always ready to clear your queries.
formelements.html
<!DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<link rel="stylesheet" type="text/css" href="formelements.css">
</head>
<body>
<div id="container">
<form method="post" action="formelements.html">
<label>SignUp</label><br><br>
<input type="text" placeholder="Username" class="textBox"/><br>
<input type="email" placeholder="Email" class="textBox" /><br>
<input type="password" placeholder="Password" class="textBox" /><br><br>
<input type="radio" name="gender" class="radioBtn" /> <span class="outsideText">Male</span>
<input type="radio" name="gender" class="radioBtn" /> <span class="outsideText">Female</span><br>
<input type="checkbox" class="checkBox" /> <span class="outsideText">I agree to the terms and
conditions of this website. This is some dummy lorem Ipsum text.</span><br>
<input type="submit" value="Sign up" id="submitBtn" />
</form>
</div>
</body>
</html>
formelements.css
form {
width:500px;
padding:8px;
border:1px solid #cccccc;
}
label {
font-size:24px;
font-family:calibri;
color:red;
text-shadow:2px 2px 1px #cccccc;
padding:6px;
font-weight:700;
}
.textBox {
width:320px;
padding:10px;
font-size:18px;
font-family:calibri;
outline:none;
border:4px solid #00bbaf;
}
.outsideText {
font-size:18px;
font-family:calibri;
}
#submitBtn {
width:160px;
padding:6px;
background:orange;
border:1px solid orange;
color:#ffffff;
font-size:18px;
font-family:calibri;
margin-top:6px;
}
The form looks in this way
No comments:
Post a Comment