Formularelemente gestalten/Anordnen

user1 · 10. April 2020

Moin,

Ich verwende für mein Vorhaben das Multi-Step-Formular von:

https://www.w3schools.com/howto/howto_js_form_steps.asp

Hier mein Code:

HTML: index.php

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">

<body>


<form id="regForm" action="index.php">

<h1>Register:</h1>

<!-- One "tab" for each step in the form: -->
<div class="tab">Informationen
    <!-- Schritt 6 -->
    <p>
        
    <textarea id="text" name="informationen" placeholder="Beschreibung"></textarea>     
    <p>

    <h2>Kontaktdaten</h2>
<p>
    <label>Anrede</label>
    <select name="anrede">
        <option value="Bitte wählen">Bitte wählen</option>
        <option value="Herr">Herr</option>
        <option value="Frau">Frau</option>
    </select>

    <div class="nebeneinander">
        <div class="block">
        <label>Vorname</label>
        <input type="Text" name="vorname" placeholder="Vorname">
        </div>
        <div class="block">
        <label>Nachname</label>
        <input type="Text" name="nachname" placeholder="Nachname">
        <label>Telefonnummer</label>
        <input type="Text" name="tel" placeholder="Telefonnummer">
        </div>
    </div>
    <div class="nebeneinander">
        <div class="block">
        <label>Strasse und Hausnummer</label>
        <input type="Text" name="adresse" placeholder="Strasse und Hausnummer">
        <label>Plz und Ort</label>
        <input type="Text" name="plzort" placeholder="Plz und Ort">
        <label>E-Mail Adresse</label>
    <input type="email" name="email" placeholder="E-Mail Adresse">
        </div>
    </div>




</div>

<div class="tab">Contact Info:
  <p><input placeholder="E-mail..." oninput="this.className = ''"></p>
  <p><input placeholder="Phone..." oninput="this.className = ''"></p>
</div>

<div class="tab">Birthday:
  <p><input placeholder="dd" oninput="this.className = ''"></p>
  <p><input placeholder="mm" oninput="this.className = ''"></p>
  <p><input placeholder="yyyy" oninput="this.className = ''"></p>
</div>

<div class="tab">Login Info:
  <p><input placeholder="Username..." oninput="this.className = ''"></p>
  <p><input placeholder="Password..." oninput="this.className = ''"></p>
</div>

<div style="overflow:auto;">
  <div style="float:right;">
    <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
    <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
  </div>
</div>

<!-- Circles which indicates the steps of the form: -->
<div style="text-align:center;margin-top:40px;">
  <span class="step"></span>
  <span class="step"></span>
  <span class="step"></span>
  <span class="step"></span>
</div>

</form>

<!-- JAVASCRIPT EINBINDUNG -->
<script src="script.js"></script>
<!-- JAVASCRIPT EINBINDUNG -->

</body>
</html>

Alles anzeigen

Code: style.css

* {
    box-sizing: border-box;
  } 
  
body {
  background-color: #f1f1f1;
}

/* ganze Form */
#regForm {
  background-color: #ffffff;
  margin: 100px auto;
  font-family: Raleway;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}


h1 {
  text-align: center;  
}

input {
    padding: 0.375rem 0.75rem;
}

/* input {
  padding: 10px;
  /*width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

/* Markieren Sie Eingabefelder, die bei der Validierung einen Fehler erhalten: */
input.invalid {
  background-color: #ffdddd;
}

/* Alle Schritte werden ausgeblendet: */

 .tab {
  display: none;
}

/*.table textarea {
  max-width: 100%;
  width: 100%;
  height: 100px
}


/** Buttons  */
button
{
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover
{
  opacity: 0.8;
}

#prevBtn
{
  background-color: #bbbbbb;
}

/* Machen Sie Kreise, die die Schritte des Formulars anzeigen: */
/* .step
{
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
} */

.step.active
{
  opacity: 1;
}

/* Markieren Sie die Schritte, die abgeschlossen und gültig sind: */
/* .step.finish
{
  background-color: #4CAF50;
} */

/** Kontaktdaten-CSS */

.nebeneinander {
    padding: 15px;
    float: left;
    background: #4CAF50;
}

textarea {
    caret-color: red;
    width: 50em;
    height: 15em;
    border: 1px solid #cccccc;
    padding: 0.5em;
    font-family: Tahoma, sans-serif;
}

textarea:focus {
    background: #13b2b8;
}

.block label { display: block;
  text-align: left;
  }

Alles anzeigen

Code: script.js

var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
  // This function will display the specified tab of the form ...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  // ... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
  // ... and run a function that displays the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form... :
  if (currentTab >= x.length) {
    //...the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false:
      valid = false;
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class to the current step:
  x[n].className += " active";
}

Alles anzeigen

Folgendes habe ich selber geschrieben:

Code: in der index.php im 1. Tab

Informationen
    <!-- Schritt 6 -->
    <p>
        
    <textarea id="text" name="informationen" placeholder="Beschreibung"></textarea>     
    <p>

    <h2>Kontaktdaten</h2>
<p>
    <label>Anrede</label>
    <select name="anrede">
        <option value="Bitte wählen">Bitte wählen</option>
        <option value="Herr">Herr</option>
        <option value="Frau">Frau</option>
    </select>

    <div class="nebeneinander">
        <div class="block">
        <label>Vorname</label>
        <input type="Text" name="vorname" placeholder="Vorname">
        </div>
        <div class="block">
        <label>Nachname</label>
        <input type="Text" name="nachname" placeholder="Nachname">
        <label>Telefonnummer</label>
        <input type="Text" name="tel" placeholder="Telefonnummer">
        </div>
    </div>
    <div class="nebeneinander">
        <div class="block">
        <label>Strasse und Hausnummer</label>
        <input type="Text" name="adresse" placeholder="Strasse und Hausnummer">
        <label>Plz und Ort</label>
        <input type="Text" name="plzort" placeholder="Plz und Ort">
        <label>E-Mail Adresse</label>
    <input type="email" name="email" placeholder="E-Mail Adresse">
        </div>
    </div>

Alles anzeigen

Code: in der Style.css Datei:

.nebeneinander {
    padding: 15px;
    float: left;
    background: #4CAF50;
}

textarea {
    caret-color: red;
    width: 50em;
    height: 15em;
    border: 1px solid #cccccc;
    padding: 0.5em;
    font-family: Tahoma, sans-serif;
}

textarea:focus {
    background: #13b2b8;
}

.block label { display: block;
  text-align: left;
  }

Alles anzeigen

Ergebnis:

html-seminar.de/woltlab/attachment/2310/

Ich komme einfach nicht drauf wieso es "nicht schön" im Feld liegt... Kann mir jemand helfen?

Merci & Gruss

Blickwinkelkanone · 10. April 2020

Poste mal bitte deine komplette index.php und style.css.

ich bin etwas verwirrt, was nun wo steht bei dir.

user1 · 10. April 2020

OKay, das hier ist komplett:

Die Index.php:

HTML: index.php

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<form id="regForm" action="index.php">
<h1>Register:</h1>
<!-- One "tab" for each step in the form: -->
<div class="tab">Informationen
    <!-- Schritt 6 -->
    <p>
        
    <textarea id="text" name="informationen" placeholder="Beschreibung"></textarea>     
    <p>
    <h2>Kontaktdaten</h2>
<p>
    <label>Anrede</label>
    <select name="anrede">
        <option value="Bitte wählen">Bitte wählen</option>
        <option value="Herr">Herr</option>
        <option value="Frau">Frau</option>
    </select>
    <div class="nebeneinander">
        <div class="block">
        <label>Vorname</label>
        <input type="Text" name="vorname" placeholder="Vorname">
        </div>
        <div class="block">
        <label>Nachname</label>
        <input type="Text" name="nachname" placeholder="Nachname">
        <label>Telefonnummer</label>
        <input type="Text" name="tel" placeholder="Telefonnummer">
        </div>
    </div>
    <div class="nebeneinander">
        <div class="block">
        <label>Strasse und Hausnummer</label>
        <input type="Text" name="adresse" placeholder="Strasse und Hausnummer">
        <label>Plz und Ort</label>
        <input type="Text" name="plzort" placeholder="Plz und Ort">
        <label>E-Mail Adresse</label>
    <input type="email" name="email" placeholder="E-Mail Adresse">
        </div>
    </div>
</div>
<div class="tab">Contact Info:
  <p><input placeholder="E-mail..." oninput="this.className = ''"></p>
  <p><input placeholder="Phone..." oninput="this.className = ''"></p>
</div>
<div class="tab">Birthday:
  <p><input placeholder="dd" oninput="this.className = ''"></p>
  <p><input placeholder="mm" oninput="this.className = ''"></p>
  <p><input placeholder="yyyy" oninput="this.className = ''"></p>
</div>
<div class="tab">Login Info:
  <p><input placeholder="Username..." oninput="this.className = ''"></p>
  <p><input placeholder="Password..." oninput="this.className = ''"></p>
</div>
<div style="overflow:auto;">
  <div style="float:right;">
    <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
    <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
  </div>
</div>
<!-- Circles which indicates the steps of the form: -->
<div style="text-align:center;margin-top:40px;">
  <span class="step"></span>
  <span class="step"></span>
  <span class="step"></span>
  <span class="step"></span>
</div>
</form>
<!-- JAVASCRIPT EINBINDUNG -->
<script src="script.js"></script>
<!-- JAVASCRIPT EINBINDUNG -->
</body>
</html>

Alles anzeigen

Die style.css:

Code: style.css

* {
    box-sizing: border-box;
  } 
  
body {
  background-color: #f1f1f1;
}
/* ganze Form */
#regForm {
  background-color: #ffffff;
  margin: 100px auto;
  font-family: Raleway;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}
h1 {
  text-align: center;  
}
input {
    padding: 0.375rem 0.75rem;
}
/* input {
  padding: 10px;
  /*width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}
/* Markieren Sie Eingabefelder, die bei der Validierung einen Fehler erhalten: */
input.invalid {
  background-color: #ffdddd;
}
/* Alle Schritte werden ausgeblendet: */
 .tab {
  display: none;
}
/*.table textarea {
  max-width: 100%;
  width: 100%;
  height: 100px
}
/** Buttons  */
button
{
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}
button:hover
{
  opacity: 0.8;
}
#prevBtn
{
  background-color: #bbbbbb;
}
/* Machen Sie Kreise, die die Schritte des Formulars anzeigen: */
/* .step
{
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
} */
.step.active
{
  opacity: 1;
}
/* Markieren Sie die Schritte, die abgeschlossen und gültig sind: */
/* .step.finish
{
  background-color: #4CAF50;
} */
/** Kontaktdaten-CSS */
.nebeneinander {
    padding: 15px;
    float: left;
    background: #4CAF50;
}
textarea {
    caret-color: red;
    width: 50em;
    height: 15em;
    border: 1px solid #cccccc;
    padding: 0.5em;
    font-family: Tahoma, sans-serif;
}
textarea:focus {
    background: #13b2b8;
}
.block label { display: block;
  text-align: left;
  }

Alles anzeigen

Die script.js:

Code: script.js

var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
  // This function will display the specified tab of the form ...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  // ... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
  // ... and run a function that displays the correct step indicator:
  fixStepIndicator(n)
}
function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form... :
  if (currentTab >= x.length) {
    //...the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}
function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false:
      valid = false;
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}
function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class to the current step:
  x[n].className += " active";
}

Alles anzeigen

Gruss

Blickwinkelkanone · 10. April 2020

Ich habe mir das mal angeguckt.

Bevor ich hier Tipps geben kann, habe ich noch eine bzw. mehrere Fragen zu deinem Projekt.

Was genau willst du mit dem Formular machen? So wie es jetzt ist, ist es nicht ausgereift.

Deine Eingabefelder für "nebeneinander" würden immer angezeigt werden, wenn du auf den Button NEXT drückst.

Vielleicht kannst du etwas mehr dazu sagen, was du vor hast, dann kann man dir eventuell auch Konzeptionelle Tipps geben.

user1 · 10. April 2020

Hallo, danke für deine Antwort.

Das Formular muss über mehrere "Seiten" gehen, damit es möglichst "nicht überladen" aussieht.

Insgesamt sind es 6 "tab's"/"Seiten", welche über viele verschiedene Steuerelemente verfügen (labels, textboxen, textarea, Radiobuttons, Checkboxen usw...).

Die Daten, welche eingegeben werden, werden anschliessend zum Teil ausgewertet und in unterschiedliche Tabellen im phpmyadmin gespeichert (in save.php--> <form id="regForm" action="save.php"> ). Danach geht es richtung Benutzerkonto.

Den Personen, die es ausfüllen kann ich kein einfaches HTML-Formular zutrauen und wäre auch nicht mehr Zeitgemäss. Deshalb muss es mit CSS "schön" gemacht und auch per Javascript während dem ausfüllen "geholfen" werden.

Vor diesem Projekt habe ich mit Quform ( https://www.quform.com/examples ) das ganze ausprobiert und war eigentlich sehr zufrieden mit dem Ergebnis. Wegen der Datenbank-Komplexität ist das aber damit nicht möglich. Deshalb bin ich nun damit beschäftigt das ganze selbst auf die Beine zu stellen.

Siehe dir > https://www.quform.com/examples -->"Contact Us" < an. Sowas will ich mit "nebeneinander" bezwecken / in diesem Style soll es später aussehen.

Mir ist klar, dass ich sicherheitsbezogene Dinge wie SQL-Injection / XSS bewusst nicht berücksichtigt habe. Das kommt alles noch.

Bin bereits ca. 1 Jahr mit lernen (nicht von Grundauf) und ca. 1/2 Jahr mit dem selber machen beschäftigt

Gruss

Sempervivum · 10. April 2020

Die Empfehlung bei solchen Layout-Problemen ist immer dieselbe: Verabschiede dich von float und mache dich mit Flexlayout vertraut. Damit ist es wesentlich einfacher, die Anordnung der Element, die dir vorschwebt, zu realisieren.

Das Beispiel bei quform gefällt mir auch und es dürfte kein Problem sein, dein Formular ebenfalls in diesem Stil zu gestalten.

Formularelemente gestalten/Anordnen

Jetzt mitmachen!

Teilen