Html5’de inputları valide etmek için input tipini belirtmek yeterli.
Email: <input type="email" name="email" />
Text: <input type="text" name="text" />
Number: <input type="number" name="number" />
Link: <input type="url" name="link" />
Gerekli alanlar filtresi (Required):
<input type="email" name="email" required />
Form validasyonlarında html5’in sağladığı validasyonları kapatmak için form etiketine novalidation ekleyeceğiz.
<form class="form-horizontal" name="signup_form" novalidate>
- İnput alanları form etiketi içinde olmalı
- Form etiketi bir isme sahip olmalı
- İnput alanları bir isme sahip olmali
Form-checkbox
<!DOCTYPE
html>
<html>
<script src =
"https://code.angularjs.org/1.5.0/angular.js"></script>
<body>
<div
ng-app="">
<form>
işaretle <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">Seçtin</h1>
</div>
</body>
</html>
Form-radiobuton
<!DOCTYPE
html>
<html>
<script src =
"https://code.angularjs.org/1.5.0/angular.js"></script>
<body
ng-app="">
<form
ng-init="sec='angular'">
<input type="radio"
ng-model="sec"
value="angular">Angular
<input type="radio"
ng-model="sec"
value="sql">sql
<input type="radio"
ng-model="sec"
value="oracle">Oracle
</form>
<div
ng-switch="sec">
<div ng-switch-when="angular">
<h1>angular</h1>
<p>Angular dersini Sectin</p>
</div>
<div ng-switch-when="sql">
<h1>sql</h1>
<p>sql dersini sectin</p>
</div>
<div ng-switch-when="oracle">
<h1>oracle</h1>
<p>Oracle Dersini Sectin</p>
</div>
</div>
</body>
</html>
Formlar-
selectlist
<html>
<script src =
"https://code.angularjs.org/1.5.0/angular.js"></script>
<body
ng-app="">
<form>
Ders Sec
<select ng-model="sec">
<option value="">
<option value="sql">sql
</option>
<option value="oracle">oracle</option>
<option value="angular">angular</option>
</select></form>
<div
ng-switch="sec">
<div ng-switch-when="sql">
<h1>sql</h1>
<p>sql dersini sectin</p>
</div>
<div ng-switch-when="oracle">
<h1>oracle</h1>
<p>oracle dersini sectin</p>
</div>
<div ng-switch-when="angular">
<h1>angular</h1>
<p>angular dersini sectin</p>
</div>
</div>
</body>
</html>
Hiç yorum yok:
Yorum Gönder