Skip to content

Instantly share code, notes, and snippets.

@michaelwebb76
Created June 14, 2017 23:32
Show Gist options
  • Save michaelwebb76/6121b1e11707b13b515992b79834f321 to your computer and use it in GitHub Desktop.
Save michaelwebb76/6121b1e11707b13b515992b79834f321 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Form</title>
<style type="text/css">body{margin:40px auto;max-width:650px;line-height:1.6;font-size:18px;color:#444;padding:0 10px}h1,h2,h3{line-height:1.2}</style>
<link rel="stylesheet" href="css/main.css" type="text/css" />
</head>
<body>
<h1>User log in form</h1>
<p class="intro-text">Register your account for buying with Bellroy.</p>
<form class="form-horizontal">
<div class="form-group" aria-hidden="true">
<label>Email</label>
<div>
<input type="url" id="inputEmail3" placeholder="Email">
<input type="password" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group" aria-hidden="true">
<label style="width: 16.66666667%;float:left;">Birthday</label>
<div style="float:left;width: 83.33333333%;">
<input type="number" id="inputEmail3">
</div>
</div>
<div class="form-group" aria-hidden="true">
<label style="width: 16.66666667%;float:left;">Address</label>
<div style="float:left;width: 83.33333333%;">
<input type="text" id="inputEmail3">
<div class="help-text" style="display: none">
Invalid location.
</div>
</div>
</div>
<div class="form-group" aria-hidden="true">
<label style="width: 16.66666667%;float:left;">Post code</label>
<div style="float:left;width: 83.33333333%;">
<input type="text" id="inputEmail3">
<div class="help-text" style="display: none">
Invalid location.
</div>
</div>
</div>
<div class="form-group" aria-hidden="true">
<label style="width: 16.66666667%;float:left;">Suburb</label>
<div style="float:left;width: 83.33333333%;">
<input type="text" id="inputEmail3">
<div class="help-text" style="display: none">
Invalid location.
</div>
</div>
</div>
<div class="form-group" aria-hidden="true">
<label>What is your First Name?</label>
<div>
<input type="cc-given-name" id="inputEmail3" placeholder="" required style="width: 650px">
<div class="help-text" style="display: none">
Invalid name: bad characters.
</div>
</div>
</div>
<div class="form-group" aria-hidden="true">
<label>Please provide your Surname</label>
<div>
<input type="family-name" id="inputEmail3" placeholder="" required style="width: 650px">
<div class="help-text" style="display: none">
Invalid name. Try again.
</div>
</div>
</div>
<div class="form-group" aria-hidden="true">
<label style="width: 16.66666667%;float:left;">Enter your credit card</label>
<div style="float:left;width: 83.33333333%;">
<input type="number" id="inputEmail3">
<div class="help-text" style="display: none">
Credit card field is required.
</div>
</div>
</div>
<div class="form-group" aria-hidden="true">
<label style="width: 16.66666667%;float:left;">CVV</label>
<div style="float:left;width: 83.33333333%;">
<input type="number" id="inputEmail3">
<div class="help-text" style="display: none">
Enter your credit security code.
</div>
</div>
</div>
<div class="form-group" aria-hidden="true">
<label style="width: 16.66666667%;float:left;">Country</label>
<div style="float:left;width: 83.33333333%;">
<input type="text" id="inputEmail3">
<div class="help-text" style="display: none">
Invalid location.
</div>
</div>
</div>
<div class="form-group" aria-hidden="true">
<label>Profile photo</label>
<div>
<input type="file" id="inputEmail3">
<div class="help-text" style="display: none">
Photo is invalid.
</div>
</div>
</div>
<div class="form-group" aria-hidden="true">
<div class="col-sm-offset-2 col-sm-10">
<div>
<label> <input type="checkbox"> <span style="float:left">Remember me</span> </label>
</div>
</div>
</div>
<div class="form-group" aria-hidden="true">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment