kjodle/responsive-forms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
kjodle 2015-10-20 18:10:07 -04:00
parent 031de678e1
commit 58f24d6c70
3 changed files with 99 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
index.htm Normal file
View File

@ -0,0 +1,37 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Forms</title>
<meta name="description" content="Demonstrating responsive forms using HTML5 and CSS3">
<meta name="author" content="Kenneth John Odle">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="screen and (min-width: 801px)" href="styles.css" />
<link rel="stylesheet" media="screen and (max-width: 800px)" href="mobile.css" />
</head>
<body>
<form>
<label for="firstname">First Name</label>
<input type="text" id="firstname" placeholder="First Name" autofocus>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" placeholder="Last Name">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Email">
<label for="url">Website</label>
<input type="url" id="url" placeholder="Web Address">
<label for"age">Age</label>
<input type="number" id="age" min="13" max="100" step="1" value="18">
<div class="clear"></div>
</form>
</body>
</html>

17
mobile.css Normal file
View File

@ -0,0 +1,17 @@
/* HTML */
form {
border-top: solid 10px #ccc;
border-bottom: solid 10px #ccc;
padding: 2%;
margin: 0;
width: 96%;
}
label {
width: 100%;
}
input {
width: 100%;
margin-bottom: 10px;
}

45
styles.css Normal file
View File

@ -0,0 +1,45 @@
/* Resets */
form,
label,
input {
margin: 0;
padding: 0;
}
/* HTML */
form {
border: solid 1px #ccc;
border-radius: 12px;
padding: 10px;
margin: 10px auto;
width: 500px;
}
label {
float: left;
text-align: right;
width: 190px;
clear: both;
}
input {
float: right;
text-align: left;
width: 300px;
margin-bottom: 3px;
}
input[type=number] {
width: 65px;
float: left;
margin-left: 6px;
}
/* Special Sections */
.clear {
clear: both;
}