Webdesign IV (Inhalte und Objekte)

Dieses Mal wurde der Fokus auf einzelne wichtige HTML-Elemente und deren Inhalte gelegt, um sich auch einmal von der Seite der User einer Homepage anzunähern. In diesem Sinne wurde ausführlich über HTML-Formulare gesprochen und alle unterschiedlichen Inputs vorgestellt (Textfeld, Textbox, Radiobuttons, Checkboxes, Selects und Buttons). Dazu wurde auch der Zusammenhang zwischen Formularen, Fieldsets, und Labels sowie den einzelnen Input-Attributen, welche innerhalb von Eingabefeldern definiert werden können, erklärt und näher gebracht. Im Anschluss daran wurde noch die HTML-Beispielseite erneut um eine Reihe im Hauptteil erweitert, sodass ein Kontaktformular darin implementiert werden konnte. Dazu wurden alle gängigen Input-Varianten herangezogen, um die unterschiedlichen Verhaltensweisen der Eingabefelder besser ausprobieren zu können. Abschließend wurde das Formular noch mittels CSS umgestyled, um es an den selben Look wie die Beispielseite anzupassen.


Kompetenzen

  1. Ich weiß welche unterschiedlichen Elemente innerhalb von HTML-Seiten implementiert werden können und kann diese anwenden.
  2. Ich verstehe wie HTML-Formulare (form, fieldset und label) arbeiten und weiß weshalb sie so wichtig in der Webentwicklung sind.
  3. Ich kann unterschiedliche Input-Elemente innerhalb von HTML-Formularen erstellen und weiß für was sie verwendet werden.
  4. Ich verstehe wie innerhalb von Input-Elementen Attribute gesetzt werden können und weiß wofür man diese benötigt.
  5. Ich kann komplexe HTML-Formulare konstruieren und sie neben anderen Inhalten wie Texten oder Bildern responsiv darstellen.
  6. Ich kann Klassen oder IDs innerhalb von Input-Elementen in einer HTML-Datei vergeben und diese dezidiert in CSS ansteuern.
  7. Ich weiß wofür Visual Studio Code verwendet wird und wie man mit den beiden Entwicklungsumgebungen umgeht.


Vertiefung

form.html
<!DOCTYPE html>
<html>
  <head>
    <title>Seitentitel</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="responsive.css">
  </head>	
 
  <body>
    <main>
      <div class="row">
        <div class="col-12">
          <h1>Kontaktformular</h1>
          <form>
            <fieldset>
              <legend>Sende mir über dieses Formular eine Nachricht</legend>
              <label>Name:</label><br>
              <input type="text" name="inputName" placeholder="Dein Name..." required="required"><br>
              <label>Email:</label><br>
              <input type="email" name="inputMail" placeholder="Deine Email Adresse..." required="required"><br>
              <label>Nachricht:</label><br>
              <textarea id="inputNachricht" name="inputNachricht" rows="9" cols="55" placeholder="Deine Nachricht..." required="required"></textarea><br>
              <br><br>
              <input type="submit" value="Absenden">
              <input type="reset" value="Zurücksetzen">
            </fieldset> 
          </form>
        </div>
      </div>
    </main>		
  </body>
</html>



Unterrichtsmaterialien


, , , , , , , , , , , , , ,