basic non functioning form

This commit is contained in:
ablwr 2014-08-03 19:35:53 -04:00
parent 6783f990a8
commit aafd97f3c0
2 changed files with 68 additions and 62 deletions

View File

@ -1,75 +1,69 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <title>ffmproviser</title>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="css/jquery.steps.css" rel="stylesheet" >
<title>Demo</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.steps.js"></script> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="css/jquery.steps.css" rel="stylesheet" >
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head> <script src="js/forms.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<div class="content"> <div class="container">
<h1>➺ ffmproviser ❥</h1> <h1>➺ ffmproviser ❥</h1>
<script> <!-- form begins -->
$(function ()
{
$("#form").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "slideLeft"
});
});
</script>
<div id="form"> <div class="well">
<h2>First Question</h2> <fieldset>
<section> <legend>First form</legend>
<form id="form-3" action="#"> <!-- First we need a select question option... form or not? -->
<h1>Question</h1> <h4>What is your question?</h4>
<fieldset> <ul>
<legend>Intro question</legend> <li>Display info</li>
<li>Export for web</li>
</ul>
</fieldset>
</div>
<label for="userName">User name *</label> <div id="file_names">
<input id="userName" name="userName" type="text"> <div class="well">
<label for="password">Password *</label> <fieldset>
<input id="password" name="password" type="text"> <legend>Input and Output</legend>
<label for="confirm">Confirm Password *</label> <div class="control-group">
<input id="confirm" name="confirm" type="text"> <label class="control-label" for="input_name">Input</label>
<p>(*) Mandatory</p> <div class="controls">
</fieldset> <input type="text" name="input_name" id="input_name" placeholder="input" />
</section> </div>
</div>
<div class="control-group">
<label class="control-label" for="output_name">Output</label>
<div class="controls">
<input type="text" name="output_name" id="output_name" placeholder="output" />
</div>
</div>
<br/>
<input type="button" class="btn btn-large btn-primary" name="generate" id="generate" value="Generate" />
</fieldset>
</div>
</div>
<h2>Second Step</h2> <div class="well">
<section> <fieldset>
<h1>Profile</h1> <legend>Your command line:</legend>
<fieldset> <textarea name="command_line" id="command_line" rows="3" cols="100"></textarea>
</fieldset>
</div>
</div> <!-- container -->
</fieldset> <div class="footer">
</section> <p>Made with ♥ by <a href="http://www.ashleyblewer.com">Ashley Blewer</a></p>
<h2>Third Step</h2>
<section>
</section>
<h2>Forth Step</h2>
<section>
</section>
</div> </div>
</div> </body>
</body>
</html> </html>

12
js/forms.js Normal file
View File

@ -0,0 +1,12 @@
$(document).ready(function() {
var $question = $('.question'),
$nextQ = $('.next-question');
$question.hide();
$question.first().show();
$nextQ.click(function() {
$question.next().slideDown("slow");
});
});