Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Working with HTML Forms Demo
<!doctype html>
<html>
<head>
<title>Forms Demo</title>
<link rel="stylesheet" href="main.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<main class="body">
<header class="header">
<div class="logo">
<img src="http://naustud.io/img/nau-logo-100.png" height="40" alt="">
</div>
<h1 class="page-title">Form Demo</h1>
</header>
<section class="main">
<nav class="left-panel">
</nav>
<form class="content" action="form-handler" id="myform" method="GET">
<fieldset>
<legend>HTML4 Inputs</legend>
<label>Name: <input name="name" type="text"></label>
<br>
<label>Password: <input name="password" type="password"></label>
<br>
<label>Gender:</label>
<label><input type="radio" name="gender" value="f"> Female</label>
<label><input type="radio" name="gender" value="m"> Male</label>
<br>
<label><input type="checkbox" name="maritalstatus"> Married?</label>
<br>
<label>Citizenship:
<select id="" name="citizenship">
<option value="">- Please Select -</option>
<option value="vietnamese">Vietnamese</option>
<option value="pr">Permanent Resident</option>
<option value="foreigner">Foreigner</option>
</select>
</label>
<br>
<label>Bio:
<textarea name="bio" id="bio" cols="30" rows="5"></textarea>
</label>
<input type="hidden" value="sent-from-web" name="sentfrom">
</fieldset>
<fieldset class="html5-inputs">
<legend>HTML5 Inputs</legend>
<label for="email">Email:</label>
<input id="email" name="email" type="email" placeholder="email@example.com">
<br>
<label for="date">Date Input:</label>
<input id="date" name="date" type="date">
<br>
<label for="time">Time Input:</label>
<input id="time" name="time" type="time">
<br>
<label for="number">Number Input:</label>
<input id="number" name="number" type="number">
<br>
<label for="range">Range Input:</label>
<input id="range" name="range" type="range" value="0" min="0" max="100" oninput="range_result.value=this.value">
<output name="range_result" for="range">0</output>
<br>
<label for="employee">Input w/DataList:</label>
<input id="employee" name="employee" type="text" list="nau-employees">
<datalist id="nau-employees">
<option value="Thanh">
<option value="Long">
<option value="Thao">
<option value="Thinh">
<option value="Thang">
<option value="Quy">
<option value="Phuong">
<option value="Vu">
<option value="Trang">
</datalist>
<br>
</fieldset>
<input type="reset" value="Reset">
<input type="submit" value="Submit" for="myform">
</form>
<aside class="right-panel">
</aside>
</section>
<footer class="footer">
<div class="copyright">&copy; 2014 All right reserved.</div>
</footer>
</main>
<script>
$('#myform').on('submit', function(event) {
var queryString = $(this).serialize();
var result = window.confirm('The query string is: ' + queryString + '\n You wanna submit?');
if (!result) {
event.preventDefault();
}
});
</script>
</body>
</html>
/*jshint node: true*/
module.exports = function (grunt) {
'use strict';
// mannual grunt task loading:
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
// install and turn on package below to automatically load grunt tasks listed in the initConfig
// require('load-grunt-tasks')(grunt);
/* ========================================================================
CUSTOM TASKS
======================================================================== */
// stub
/* ========================================================================
INIT CONFIG
======================================================================== */
grunt.initConfig({
//pkg: grunt.file.readJSON('package.json'),
//directories
dirs: {
src: '.',
release: '~release'
},
watch: {
livereload: {
options: {
livereload: 35729
},
files: [
'<%= dirs.src %>/*.html',
'<%= dirs.src %>/*.css',
'<%= dirs.src %>/*.js',
'<%= dirs.src %>/**/*.{gif,jpeg,jpg,png,svg,webp}'
]
}
},
connect: {
options: {
port: 8080,
livereload: 35729,
// change this to '0.0.0.0' to access the server from outside
hostname: '0.0.0.0'
},
livereload: {
options: {
open: true,
base: [
'<%= dirs.src %>'
],
middleware: function(connect, options, middlewares) {
// inject a custom middleware into the array of default middlewares
middlewares.unshift(function(req, res, next) {
if (req.url.indexOf('/form-handler') === -1) return next();
var method = req.method;
var resStr = '';
resStr += 'Method: ' + req.method + '\n';
if (method === 'POST') {
resStr += 'Data: ';
req.on('data', function(chunk) {
resStr += chunk;
});
req.on('end', function() {
res.end(resStr);
});
} else {
resStr += 'Query:' + req.url + '\n';
res.end(resStr);
}
});
return middlewares;
},
}
}
},
});
/* ========================================================================
TASK COMPOSITION (ALIASING)
======================================================================== */
/*******************
* TESTING
*******************/
grunt.registerTask('serve', function (/*target*/) {
grunt.task.run([
'connect',
'watch'
]);
});
/*******************
* DEFAULT TASK
*******************/
grunt.registerTask('default', ['serve']);
};
* {
box-sizing: border-box;
}
.body {
font-family: sans-serif;
width: 960px;
margin: auto;
}
.header {
height: 80px;
width: 960px;
background: #eee;
}
.logo {
display: inline-block;
margin: 10px;
}
.logo img {
vertical-align: middle;
}
.page-title {
display: inline-block;
margin: 0;
height: 80px;
line-height: 80px;
vertical-align: middle;
}
.main {
width: 960px;
min-height: 500px;
}
.left-panel {
float: left;
width: 15%;
background: #dddddd;
min-height: 500px;
}
.content {
float: left;
width: 70%;
}
.right-panel {
float: right;
width: 15%;
background: #dddddd;
min-height: 500px;
}
.footer {
clear: both;
height: 35px;
background: #eee;
}
.copyright {
font-size: 0.8em;
padding: 10px;
text-align: center;
}
nav a {
display: block;
padding: 10px;
}
textarea {
vertical-align: top;
}
label {
line-height: 40px;
}
.html5-inputs label {
display: inline-block;
width: 150px;
text-align: right;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment