Two-Column Form

Developer
Mobile Application Design-Development
Size
2,518 Kb
Views
26,312
  1. Two-Column Form Previews
  2. Two-Column Form HTML Codes
  3. Two-Column Form CSS Codes

How do I make an two-column form?

What is a two-column form? How do you make a two-column form? This script and codes were developed by Mobile Application Design-Development on 24 November 2022, Thursday.

Two-Column Form Previews
IQ Test

Two-Column Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Two-Column Form</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">	<header class="masthead">	<h1>Online Forum</h1> </header> <section class="main">	<h2>User Registration</h2> <p>Please follow the instructions to fill out this form. If there are no instructions then please add some.</p> <form action="register.php" method="post" enctype="application/x-www-form-urlencoded">	<div class="formbox">	<label for="email">E-mail</label> <input type="email" name="email" id="email" autocomplete="off" required placeholder="Your e-mail address" class="wide" /> </div> <div class="formbox">	<label for="pass">Password</label> <input type="password" name="pass" id="pass" autocomplete="off" required class="med"/> </div> <div class="formbox">	<label for="pass2">Re-type Password</label> <input type="password" name="pass2" id="pass2" autocomplete="off" required class="med"/> </div> <div class="formbox">	<label for="firstname">First Name</label> <input type="text" name="firstname" id="firstname" autocomplete="off" required placeholder="Just your given name" class="med" /> </div> <div class="formbox">	<label for="lastname">Last Name</label> <input type="text" name="lastname" id="lastname" autocomplete="off" required placeholder="Just your family name" class="med" /> </div> <div class="formbox">	<label for="usertype">Account Type</label> <select name="usertype" id="usertype" class="med">	<option value="1">Pirate</option> <option value="2">Ninja</option> <option value="3">Robot</option> <option value="4">Alien</option> <option value="5">Colonial Marine</option> </select> </div> <div class="formbox buttons">	<input type="submit" name="btnSubmit" id="btnSubmit" value="Register" class="btn" /> </div> </form> </section> <footer class="footer">	<p>&copy; Chicken Stuff Inc.</p> </footer> </div>
</body>
</html>

Two-Column Form - Script Codes CSS Codes

/******************
Defaults
*******************/
html, body{	font-family:Arial, Helvetica, sans-serif;	background:#cecece;
}
body{	font-size: 62.5%;
}
h1, h2, h3, h4{	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;	padding:1.0rem 3rem;
}
h1{	font-size: 3.6rem;	color:#FC3;
}
h2{	font-size: 2.4rem;
}
h3{	font-size: 1.8rem;
}
h4{	font-size: 1.5rem;
}
p, li{	font-size: 1.5rem;	padding: 0.8rem 3rem;
}
/******************
Layout
*******************/
.wrapper{	width:1180px;	margin:0 auto;	border:1px solid #333;
}
.masthead{	background: #666;	color:#fff;	padding-bottom: 20px;	border-bottom: 6px solid #333;
}
.footer{	background: #666;	color:#fff;	padding-top: 20px;	border-top: 6px solid #333;
}
/******************	Form
*******************/
form{	max-width: 90%;
}
legend{
}
.formbox{	clear: both;	margin: 1.0rem 0;
}
label{	width: 15rem;	text-align:right;	float:left;	margin: 0 3rem 0 0 ;	font-size: 1.2rem;	padding:0.6rem 0;	color: #666;
}
input, select, textarea{	text-align:left;	font-size: 1.2rem;	padding: 0.5rem 0.5rem;	margin: 0;	color: #333;
}
.btn{	width: auto;
}
.narrow{	width: 4rem;
}
.med{	width: 20rem;
}
.wide{	width: 40rem;
}
.x-wide{	width: 60rem;
}
.buttons{	width: 100%;	padding:0 0 0 15rem;
}
Two-Column Form - Script Codes
Two-Column Form - Script Codes
Home Page Home
Developer Mobile Application Design-Development
Username mad-d
Uploaded November 24, 2022
Rating 3
Size 2,518 Kb
Views 26,312
Do you need developer help for Two-Column Form?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mobile Application Design-Development (mad-d) Script Codes
Name
MAD9014 Exercise 3 Starters
HTML5 Canvas Intro
MAD9022 Simple Pie Chart
A Pen by Mobile Application Design-Development
Mad9013 - column starter
Navigation Tabs
Sept 14 Demo
MAD9022 Refactoring Practice
Contact Manager
Mobile Web App Starter
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!