-
Notifications
You must be signed in to change notification settings - Fork 59
/
index.html
60 lines (51 loc) · 3.17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<head>
<title>AngularJS Form</title>
<script type="text/javascript" src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
<script type="text/javascript" src="js/modules/promise-tracker.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<body class="container">
<h2>AngularJs form</h2>
<p>This is an AngularJs based form. It uses a controller to handle form validation and submission.</p>
<p>Find a step by step tutorial on this form at <a href="https://www.lullabot.com/blog/article/processing-forms-angularjs">the Lullabot Blog</a>.</p>
<a href="https://github.com/juampy72/angularjs_form"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<div data-ng-controller="help">
<div id="messages" class="alert alert-success" data-ng-show="messages" data-ng-bind="messages"></div>
<div data-ng-show="progress.active()" style="color: red; font-size: 50px;">Sending…</div>
<form name="helpForm" novalidate role="form">
<div class="form-group">
<label for="name">Your Name </label>
<span class="label label-danger" data-ng-show="submitted && helpForm.name.$error.required">Required!</span>
<input type="text" name="name" data-ng-model="name" class="form-control" required />
</div>
<div class="form-group">
<label for="email">Your E-mail address</label>
<span class="label label-danger" data-ng-show="submitted && helpForm.email.$error.required">Required!</span>
<span class="label label-danger" data-ng-show="submitted && helpForm.$error.email">Invalid email!</span>
<input type="email" name="email" data-ng-model="email" class="form-control" required />
</div>
<div class="form-group">
<label for="subjectList">What is the nature of your request?</label>
<span class="label label-danger" data-ng-show="submitted && helpForm.subjectList.$error.required">Required!</span>
<select name="subjectList" data-ng-model="subjectList" data-ng-options="id as value for (id, value) in subjectListOptions" class="form-control" required>
<option value=""></option>
</select>
</div>
<div class="form-group">
<label for="url">URL of Relevant Page</label>
<span class="label label-danger" data-ng-show="submitted && helpForm.$error.url">Invalid URL format!</span>
<input type="url" name="url" data-ng-model="url" class="form-control" />
</div>
<div class="form-group">
<label for="comments">Description</label>
<span class="label label-danger" data-ng-show="submitted && helpForm.comments.$error.required">Required!</span>
<textarea name="comments" data-ng-model="comments" class="form-control" required></textarea>
</div>
<button data-ng-disabled="progress.active()" data-ng-click="submit(helpForm)" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>