mirror of
https://gitlab.com/harald.mueller/aktuelle.kurse.git
synced 2024-10-19 18:05:02 +02:00
208 lines
5.9 KiB
HTML
208 lines
5.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="description" content="Formular">
|
||
|
|
<meta name="autor" content="Muster Schüler"
|
||
|
|
<meta name="viewport" content="width=device-with, initial-sclae=1">
|
||
|
|
<!-- Latest compiled and minified CSS -->
|
||
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
|
||
|
|
|
||
|
|
<title>Webauftrit</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="jumbotron text-center" style="background-color:#3366cc;color:#cccccc">
|
||
|
|
<h1>Muster Schüler</h1>
|
||
|
|
<p>Aufgabe 1</p>
|
||
|
|
</div>
|
||
|
|
<nav class="navbar navbar-inverse">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="navbar-header">
|
||
|
|
<a class="navbar-brand" href="#">John Tester</a>
|
||
|
|
</div>
|
||
|
|
<ul class="nav navbar-nav">
|
||
|
|
<li class="active"><a href="formular.html">Home</a></li>
|
||
|
|
<li><a href="formular.html">Formular</a></li>
|
||
|
|
<li><a href="#">Page 2</a></li>
|
||
|
|
<li><a href="#">Page 3</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
<form class="form-horizontal">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="control-label col-sm-2" for="name">Name:</label>
|
||
|
|
<div class="col-sm-10">
|
||
|
|
<input type="name" class="form-control" id="name" placeholder="Name">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="control-label col-sm-2" for="Nummer">Nummer:</label>
|
||
|
|
<div class="col-sm-10">
|
||
|
|
<input type="number" class="form-control" id="number" placeholder="Nummer">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="control-label col-sm-2" for="email">Email:</label>
|
||
|
|
<div class="col-sm-10">
|
||
|
|
<input type="email" class="form-control" id="email" placeholder="Enter email">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="control-label col-sm-2" for="pwd">Password:</label>
|
||
|
|
<div class="col-sm-10">
|
||
|
|
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="control-label col-sm-2" for="comment">Comment:</label>
|
||
|
|
<div class="col-sm-10">
|
||
|
|
<textarea class="form-control" rows="5" id="comment"></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<h2 align="center">Zugriff: </h2>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="control-label col-sm-2" ><input type="radio" name ="radio" value="">öffentlich</label>
|
||
|
|
<label class="control-label col-sm-2" ><input type="radio" name ="radio" value="">schulintern</label>
|
||
|
|
<label class="control-label col-sm-2" ><input type="radio" name ="radio" value="">Klasse</label>
|
||
|
|
<label class="control-label col-sm-2" ><input type="radio" name ="radio" value="" checked="">Privat
|
||
|
|
</label>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h1 align="center">Sichtbar für: </h1>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="control-label col-sm-2" ><input type="checkbox" id="check0" value="" checked="">AP11</label>
|
||
|
|
<label class="control-label col-sm-2" ><input type="checkbox" id="check1" value="">AP21</label>
|
||
|
|
<label class="control-label col-sm-2" ><input type="checkbox" id="check2" value="">AX31</label>
|
||
|
|
<label class="control-label col-sm-2" ><input type="checkbox" id="check3" value="">CP35
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="control-label col-sm-2" for="sel1">Erfasst von:</label>
|
||
|
|
<div class="col-sm-2">
|
||
|
|
<select class="form-control" id="sel1">
|
||
|
|
<option>John Tester</option>
|
||
|
|
<option>James Bond</option>
|
||
|
|
<option>Helene Fischer</option>
|
||
|
|
<option>Roger Federer</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-2"> </div>
|
||
|
|
<input class="control-label" type="button" id="button1" value= "Abgabe" onclick="hallo()">
|
||
|
|
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
//checkbox
|
||
|
|
function countChecked(){
|
||
|
|
var checkedVal = 0;
|
||
|
|
for(var i=0;i<4;i++){
|
||
|
|
myObj = document.getElementById('check'+i);
|
||
|
|
|
||
|
|
if(myObj.checked==true){
|
||
|
|
checkedVal = checkedVal + parseInt(myObj.value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
document.getElementById('countChecked').innerHTML = checkedVal;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
//zaehlen
|
||
|
|
function zaehlen() {
|
||
|
|
max = 25;
|
||
|
|
anz = document.getElementById('name').value.length
|
||
|
|
document.getElementById('zaehlen').innerHTML = anz
|
||
|
|
if(anz >= max){
|
||
|
|
alert("Maximum erreicht !!!");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//Kommentarbox
|
||
|
|
function zaehlen2() {
|
||
|
|
max = 2000;
|
||
|
|
anz = document.getElementById('comment').value.length
|
||
|
|
document.getElementById('zaehlen2').innerHTML = anz
|
||
|
|
if(anz >= max){
|
||
|
|
alert("Maximum erreicht !!!");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//wieviele "e" in Ihrem Namen
|
||
|
|
function countletters() {
|
||
|
|
in1 = document.getElementById('name').value
|
||
|
|
var counter1 = 0;
|
||
|
|
for (var i = 0; i<in1.length; i++) {
|
||
|
|
var index_of_sub = in1.indexOf(e, i);
|
||
|
|
|
||
|
|
if (index_of_sub > -1) {
|
||
|
|
counter1++;
|
||
|
|
i = index_of_sub;}}
|
||
|
|
document.getElementById('countletters').innerHTML = counter1;
|
||
|
|
}
|
||
|
|
|
||
|
|
//Browser + Version
|
||
|
|
//browserCheck
|
||
|
|
|
||
|
|
function browserCheck(){
|
||
|
|
browser = ("Sie verwenden " + navigator.appName + "Version " +navigator.appVersion)
|
||
|
|
document.getElementById('browserCheck').innerHTML = browser;
|
||
|
|
}
|
||
|
|
//im quadrat
|
||
|
|
function quadrat(){
|
||
|
|
zahl3 = document.getElementById('number').value
|
||
|
|
zahl4 = parseInt(zahl3)
|
||
|
|
qu = Math.pow(zahl4, 2)
|
||
|
|
document.getElementById('quadrat').innerHTML = qu;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
//quersumme
|
||
|
|
function quersumme(){
|
||
|
|
|
||
|
|
zahl5 = document.getElementById('number').value
|
||
|
|
var summe = 0;
|
||
|
|
var segs = (zahl5+'').split('');
|
||
|
|
for (var i=0; i<segs.length; i++)
|
||
|
|
summe += parseInt(segs[i])
|
||
|
|
document.getElementById('quersumme').innerHTML = summe;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function hallo()
|
||
|
|
{
|
||
|
|
document.getElementById('date').innerHTML = Date();
|
||
|
|
zaehlen();
|
||
|
|
zaehlen2();
|
||
|
|
browserCheck();
|
||
|
|
quadrat();
|
||
|
|
quersumme();
|
||
|
|
countletters();
|
||
|
|
countChecked();
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<br>
|
||
|
|
Ihr Name hat :<p id="zaehlen"></p> Buchstaben.<br>
|
||
|
|
Datum:<p id="date"></p>
|
||
|
|
Anzahl Zeichen in der Kommentarbox: <p id="zaehlen2"></p>
|
||
|
|
Browserdaten: <p id="browserCheck"></p>
|
||
|
|
Ihre Zahl im Quadrat: <p id="quadrat"></p>
|
||
|
|
<br>
|
||
|
|
Die Quersummer ihrer Zahl lautet: <p id="quersumme"></p>
|
||
|
|
<br>
|
||
|
|
Sie haben <p id="countletters"></p> "E/e" in ihrem Namen.
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
Sie haben <p id="countChecked"></p> Checkboxen gewählt.
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|