trongthanh/Gruntfile.js

## form.html
<!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>

## Gruntfile.js
/*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']);
};

## main.css
* {
	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;
}
	<!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">© 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;
	}