Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

«
»

XHTML-Elemente: Formulare

Posted by sura1 - 21. August 2008

Bookmark and Share

FORMULARE:

Erklärung zu den Beispielen:

Klicken Sie bitte auf den Link BESCHREIBUNG und Sie erhalten eine ausführliche Erläuterung des betreffenden XHTML-Elementes (entnommen aus http://de.selfhtml.org/ ).

Für jedes Element stelle ich Ihnen ein von mir gestaltetes Beispiel vor (mit Quell-Text und Browser-Ansicht). Zusätzlich finden Sie unter WEITERE BEISPIELE je einen Link auf die englischsprachigen XHTML-Tutorials der Webseiten http://htmlplayground.com/ und
http://www.w3schools.com/

<button> </button>

Anklickbare Schaltfläche ( Beschreibung )

Das <button>-Element definiert einen Submit-Button, Reset-Button oder einen Push-Button in einem Formular.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>button-Element: Definition anklickbare Schaltfläche</title>
</head>

<body>
<h1>Definiton anklickbare Schaltfläche</h1>
<form action="button.htm">
  <div>
    <button name="Klickmich" type="button"
      value="Überraschung" onclick="alert('Überraschung!');">
      <p>
        <img src="logo.jpg" width="332" height="93" title="logo"
        alt="logo Sura 1 Artworks" /><br>
        <b>Was passiert wohl, wenn Sie mich anklicken?</b>
      </p>
    </button>
  </div>
</form>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_button.asp
http://htmlplayground.com/#tag_button

<fieldset> </fieldset>

Formular-Elemente ( Beschreibung )

Das <fieldset>-Tag gruppiert zusammengehörige Formular-Elemente.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>fieldset-Element: Definition Gruppierung Formular-Elemente</title>
</head>

<body>
<h1>Definition Gruppierung Formular-Elemente</h1>
<fieldset>
<legend>Körper-Informationen:</legend>
<form action="">
Größe <input type="text" size="3" />
Gewicht <input type="text" size="3" />
</form>
</fieldset>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_fieldset.asp
http://htmlplayground.com/#tag_fieldset

<form> </form>

Formularbereich ( Beschreibung )

Mit <form>…</form> definieren Sie ein Formular. Alles, was zwischen dem einleitenden <form>-Element und dem abschließenden Element </form> steht, gehört zum Formular.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>form-Element: Definition Formularbereich</title>
</head>

<body>
<h1>Definition Formularbereich</h1>
<form action="form_action.asp"
method="get">

Vorname:
<input type="text" name="fname" value="Sura 1" />
<br />
Familienname:
<input type="text" name="lname" value="Sura 2" />
<br />
<input type="submit" value="Abschicken" />
</form>

<p>
Wenn sie den "Abschicken"-Button anklicken, schicken Sie ihre Nachricht<br />
an eine Seite mit dem Namen &quot;form_action.asp&quot;.
</p>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_form.asp
http://htmlplayground.com/#tag_form

<input />

Formularelement zur Eingabe (Beschreibung (Eingabefelder), Beschreibung (Radio-Buttons), Beschreibung (Checkboxen), Beschreibung (Klick-Buttons), Beschreibung (Datei-Upload-Felder), Beschreibung (versteckte Elemente), Beschreibung (Submit-/Resetbuttons). )

Das <input>-Element erzeugt Eingabefelder, Radio-Buttons, Checkboxen, Klick-Buttons, Datei-Upload-Felder, versteckte Elemente, Submit-Buttons, Reset-Buttons.

Beispiel (9 verschiedene Eingabefelder):

Quellcode:

1. Formular für Namenseingabe

<form action="input_text.htm">
  <p>Vorname:<br><input name="vorname" type="text" size="30" maxlength="30"></p>
  <p>Zuname:<br><input name="zuname" type="text" size="30" maxlength="40"></p>
</form>

2. Eingabefeld für Passwörter

<form action="input_password.htm">
  <p>Kennwort:<br><input name="kennwort" type="password" size="12" maxlength="12"></p>
</form>

3. Mehrzeilige Eingabebereiche definieren

<form action="textarea.htm">
  <p>Welche HTML-Elemente fallen Ihnen ein, und was bewirken sie:<br>
    <textarea name="user_eingabe" cols="50" rows="10"></textarea>
  </p>
</form>

4. Beschreibung Radio-Buttons

<form action="input_radio.htm">
  <p>Geben Sie Ihre Zahlungsweise an:</p>
  <p>
    <input type="radio" name="Zahlmethode" value="Mastercard"> Mastercard<br>
    <input type="radio" name="Zahlmethode" value="Visa"> Visa<br>
    <input type="radio" name="Zahlmethode" value="AmericanExpress"> American Express
  </p>
</form>

5. Checkboxen definieren

<form action="input_checkbox.htm">
  <p>Kreuzen Sie die gewünschten Zutaten an:</p>
  <p>
    <input type="checkbox" name="zutat" value="salami"> Salami<br>
    <input type="checkbox" name="zutat" value="pilze"> Pilze<br>
    <input type="checkbox" name="zutat" value="sardellen"> Sardellen
  </p>
</form>

6. Click-Buttons definieren

<form action="input_button.htm">
  <p>
    <textarea cols="20" rows="4" name="textfeld"></textarea>
    <input type="button" name="Text 1" value="Text 1 anzeigen"
 onclick="this.form.textfeld.value='Text 1 und rückwärts seltsam geschrieben ich bin.'">
    <input type="button" name="Text 2" value="Text 2 anzeigen"
      onclick="this.form.textfeld.value='Ich bin Text 2 - ganz normal'">
  </p>
</form>

7. Felder für Datei-Upload

<form action="input_file.htm" method="post" enctype="multipart/form-data">
  <p>Wählen Sie eine Textdatei (txt, html usw.) von Ihrem Rechner aus:<br>
    <input name="Datei" type="file" size="50" maxlength="100000" accept="text/*">
  </p>
</form>

8. Versteckte Elemente in Formularen definieren

<form name="Feedback" action="input_hidden.htm">
  <p>
    <input type="hidden" name="UserBrowser" value="">
    Ihr Kommentar:<br>
    <textarea name="UserKommentar" rows="2" cols="20"></textarea><br>
    <input type="submit" value="senden"><br>
  </p>
  <script type="text/javascript">
    document.Feedback.UserBrowser.value = navigator.appName;
  </script>
</form>

9. Buttons zum Absenden von Formularen

<p>Voraussetzung ist eine Verbindung ins Internet.
Es werden keine Daten gespeichert, das verarbeitende
CGI-Script gibt lediglich die eingelesenen Daten aus.</p>

<form action="http://de.selfhtml.org/cgi-bin/comments.pl">
  <table border="0" cellpadding="5" cellspacing="0" bgcolor="#E0E0E0">
    <tr>
      <td align="right">Vorname:</td>
      <td><input name="Vorname" type="text" size="30" maxlength="30"></td>
    </tr>
    <tr>
      <td align="right">Zuname:</td>
      <td><input name="Zuname" type="text" size="30" maxlength="40"></td>
    </tr>
    <tr>
      <td align="right" valign="top">Kommentar:</td>
      <td><textarea name="Text" rows="10" cols="50"></textarea></td>
    </tr>
    <tr>
      <td align="right">Formular:</td>
      <td>
        <input type="submit" value=" Absenden ">

        <input type="reset" value=" Abbrechen">
      </td>
    </tr>
  </table>
</form

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_input.asp
http://htmlplayground.com/#tag_input

<label> </label>

Text eines Formularfeldes ( Beschreibung )

Das <label>-Element ordnet Text einem Formularfeld zu.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>label-Element: Zuordnung Text zu Formularfeld</title>
</head>

<body>
<h1>Zuordnung Text zu Formularfeld</h1>
<hr />
<h2>Label für Elemente (1)</h2>
<p>Auswahl:</p>
<form name="input" action="">
<input type="radio" name="sex" id="male" />
<label for="male">Mann</label>
<br />
<input type="radio" name="sex" id="female" />
<label for="female">Frau</label>
</form>
<hr />
<h2>Label für Elemente (2)</h2>
<form action="label.htm">
  <fieldset>
    <legend>Formular</legend>
    <table>
      <tr>
        <td><label for="vorname">Vorname:</label></td>
        <td><input type="text" id="vorname" name="Vorname" value="Ihr Vorname"></td>
      </tr>
      <tr>
        <td><label for="nachname">Zuname:</label></td>
        <td><input type="text" id="nachname" name="Zuname" value="Ihr Nachname"></td>
      </tr>
      <tr>
        <td><label for="auswahl">Auswahl:</label></td>
        <td><input type="checkbox" id="auswahl" name="Auswahl"></td>
      </tr>
    </table>
  </fieldset>
</form>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_label.asp
http://htmlplayground.com/#tag_label

<legend> </legend>

Überschrift von Formularelementen ( Beschreibung )

Das <legend>-Element definiert eine Überschrift für Formular-Elemente, die durch das <fieldset>-Element zusammengefasst wurden.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>legend-Element: Überschrift für Gruppe von Formularelementen</title>
</head>

<body>
<h1>Definition Gruppenüberschriften</h1>

<form action="fieldset_legend.htm">
  <fieldset>
    <legend>Absender</legend>
    <table>
      <tr>
        <td>Ihr Vorname:</td>
        <td><input type="text" size="40" maxlength="40" name="Vorname"></td>
      </tr><tr>
        <td>Ihr Zuname:</td>
        <td><input type="text" size="40" maxlength="40" name="Zuname"></td>
      </tr>
    </table>
  </fieldset>
  <fieldset>
    <legend>Wunsch</legend>
    <table>
      <tr>
        <td>Ihr Hauptwunsch:</td>
        <td><input type="text" size="40" maxlength="40" name="Hauptwunsch"></td>
      </tr><tr>
        <td>Ihr Zusatzwunsch:</td>
        <td><input type="text" size="40" maxlength="40" name="Zusatzwunsch"></td>
      </tr>
    </table>
  </fieldset>
</form>

</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_legend.asp
http://htmlplayground.com/#tag_legend

<optgroup> </optgroup>

Verschachtelung einer Gruppe von Einträgen in eine Auswahlliste ( Beschreibung )

Das <optgroup>-Element gruppiert verwandte Einträge innerhalb eines Pulldown-Menüs.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>optgroup-Element: Verschachtelte Auswahllisten
          (Menüstruktur) definieren</title>
</head>

<body>
<h1>Verschachtelte Auswahllisten (Menüstruktur) definieren</h1>
<h2>W&auml;hlen Sie Ihren Lieblingsnamen!</h2>

<form action="select_optgroup.htm">
  <p>Zur Auswahl stehen:</p>
  <p>
    <select name="Namen" size="6">
      <optgroup label="Namen mit A">
        <option label="Anna">Anna</option>
        <option label="Achim">Achim</option>
        <option label="August">August</option>
      </optgroup>
      <optgroup label="Namen mit B">
        <option label="Berta">Berta</option>
        <option label="Barbara">Barbara</option>
        <option label="Bernhard">Bernhard</option>
      </optgroup>
      <optgroup label="Namen mit C">
        <option label="Caesar">Caesar</option>
        <option label="Christiane">Christiane</option>
        <option label="Christian">Christian</option>
      </optgroup>
    </select>
  </p>
</form>

</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_optgroup.asp
http://htmlplayground.com/#tag_optgroup

<option> </option>

Eintrag in einer Auswahlliste ( Beschreibung )

Das <option>-Element fügt Einträge in ein Klappmenü ein.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>option-Element: Definition Eintrag in einer Auswahlliste</title>
</head>

<body>
<h1>Definition Eintrag in einer Auswahlliste</h1>

<h2>Beispiel 1</h2>

<form action="select.htm">
  <p>
    <select name="top5" size="3">
      <option>Heino</option>
      <option>Michael Jackson</option>
      <option>Tom Waits</option>
      <option>Nina Hagen</option>
      <option>Marianne Rosenberg</option>
    </select>
  </p>
</form>

<h2>Beispiel 2</h2>
<form action="select.htm">
  <p>
    <select>
     <option value ="volvo">Volvo</option>
     <option value ="saab">Saab</option>
     <option value ="opel">Opel</option>
     <option value ="audi">Audi</option>
    </select>
  </p>
</form>

</body>
</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_option.asp
http://htmlplayground.com/#tag_option

<select> </select>

Auswahlliste ( Beschreibung )

Das <select>-Element definiert ein Eingabefeld für die Auswahl von Optionen und erzeugt eine Pulldown-Liste in einem Formular.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>select-Element: Definition Auswahlliste</title>
</head>

<body>

<h1>Definition Auswahlliste</h1>

<h2>W&auml;hlen Sie Ihren Favoriten!</h2>

<form action="select.htm">
  <p>
    <select>
      <option>Heino</option>
      <option>Michael Jackson</option>
      <option>Tom Waits</option>
      <option>Nina Hagen</option>
      <option>Marianne Rosenberg</option>
    </select>
  </p>
</form>

<hr noshade size="1" />

<h2>W&auml;hlen Sie so viele Favoriten, wie Sie wollen!</h2>

<form action="select.htm">
  <p>
    <select name="top5" size="5" multiple>
      <option>Heino</option>
      <option>Michael Jackson</option>
      <option>Tom Waits</option>
      <option>Nina Hagen</option>
      <option>Marianne Rosenberg</option>
    </select>
  </p>
</form>

</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_select.asp
http://htmlplayground.com/#tag_select

<textarea> </textarea>

Mehrzeiliges Eingabefeld ( Beschreibung )

Das <textarea>-Element definiert ein mehrzeiliges Eingabefeld.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>textarea-Element: Definition mehrzeiliges Eingabefeld</title>
</head>

<body>
<h1>Definition mehrzeiliges Eingabefeld</h1>

<form action="textarea.htm">
  <p>Welche HTML-Elemente fallen Ihnen ein, und was bewirken sie:<br>
    <textarea name="user_eingabe" cols="50" rows="10"></textarea>
  </p>
</form>

</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_select.asp
http://htmlplayground.com/#tag_textarea

This entry was posted on 21. August 2008 um 10:43 and is filed under XHTML-Elemente. Verschlagwortet mit: , , , , , , , , , , , , , , , , , , , . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, oder trackback from your own site.

Hinterlasse einen Kommentar

«
»