So richten Sie Eingabeformulare in HTML aus

117

Ich bin neu in HTML und versuche zu lernen, wie man Formulare verwendet.

Das größte Problem, das ich bisher habe, ist das Ausrichten der Formulare. Hier ist ein Beispiel meiner aktuellen HTML-Datei:

<form>
 First Name:<input type="text" name="first"><br />
 Last Name:<input type="text" name="last"><br />
 Email:<input type="text" name="email"><br />
</form>

Das Problem dabei ist, dass sich das Feld nach "E-Mail" in Bezug auf den Abstand drastisch von Vor- und Nachnamen unterscheidet. Was ist der "richtige" Weg, um es so zu machen, dass sie im Wesentlichen "aufstellen"?

Ich versuche, gute Form und Syntax zu üben ... viele Leute tun dies möglicherweise mit CSS. Ich bin mir nicht sicher, ich habe bisher nur die Grundlagen von HTML gelernt.

html forms alignment

— Yoshyosh
quelle

Es gibt einen ständigen Kampf zwischen den Tabellen (wenn überhaupt). Die Antworten auf Ihre Frage sind nicht die Ausnahme, sondern die mittlere Naht, dass <Tabellen> für tabellarische Daten bestimmt sind. Weitere Informationen finden Sie

— Trufa

Genau die gleiche Frage, aber die Antwort schlägt vor, das <table> -Tag mit dem Zitat von W3C zu verwenden: stackoverflow.com/questions/4707332

— Bossliaw

62

In einem anderen Beispiel wird CSS verwendet. Ich habe das Formular einfach in ein div mit der Containerklasse eingefügt. Und angegeben, dass die darin enthaltenen Eingabeelemente 100% der Containerbreite betragen und keine Elemente auf beiden Seiten enthalten sollen.

.container {
  width: 500px;
  clear: both;
}

.container input {
  width: 100%;
  clear: both;
}

<html>

<head>
  <title>Example form</title>
</head>

<body>
  <div class="container">
    <form>
      <label>First Name</label>
      <input type="text" name="first"><br />
      <label>Last Name</label>
      <input type="text" name="last"><br />
      <label>Email</label>
      <input type="text" name="email"><br />
    </form>
  </div>
</body>

</html>

Erweitern Sie das Snippet

— serialk
quelle

2

Perfekt, hat mir nur viel Durcheinander erspart.

— null

Außerdem wird meine Schaltfläche "Senden" auf die Breite des Containers erweitert.

— Saurabh Rana

4

Diese Lösung scheint nicht zu funktionieren. Die Eingabeelemente sind nicht linksbündig. Die folgende Tabellenlösung funktioniert.

— Johny, warum

1

Ich bin kein großer Fan davon, eine explizite Breite festzulegen, wenn Sie auf eine verzichten können (siehe meine Antwort unten)

— Clément

1

Dies führt zu seltsamen Ergebnissen mit Optionsfeldern. Die Beschriftung des Optionsfelds zeigt die Zeile nach dem eigentlichen Optionsfeld an.

— Worte für den

134

Die akzeptierte Antwort (Festlegen einer expliziten Breite in Pixel) erschwert das Vornehmen von Änderungen und führt zu Unterbrechungen, wenn Ihre Benutzer eine andere Schriftgröße verwenden. Die Verwendung von CSS-Tabellen funktioniert dagegen hervorragend:

form  { display: table;      }
p     { display: table-row;  }
label { display: table-cell; }
input { display: table-cell; }

<form>
  <p>
    <label for="a">Short label:</label>
    <input id="a" type="text">
  </p>
  <p>
    <label for="b">Very very very long label:</label>
    <input id="b" type="text">
  </p>
</form>

Erweitern Sie das Snippet

Hier ist eine JSFiddle: http://jsfiddle.net/DaS39/1/

Und wenn Sie die Beschriftungen rechtsbündig benötigen, fügen Sie text-align: rightsie einfach zu den Beschriftungen hinzu: http://jsfiddle.net/DaS39/

BEARBEITEN: Noch eine kurze Anmerkung: In CSS-Tabellen können Sie auch mit Spalten spielen: Wenn Sie beispielsweise möchten, dass die Eingabefelder so viel Platz wie möglich beanspruchen, können Sie Folgendes in Ihr Formular einfügen

<div style="display: table-column;"></div>
<div style="display: table-column; width:100%;"></div>

Sie können hinzufügen möchten , white-space: nowrapum die labelsin diesem Fall.

— Clément
quelle

4

Ich mag diese Lösung. Dies bedeutet, dass ich mir keine Sorgen machen muss, dass sich die Breite meiner Spalten zwangsläufig ändert, wenn sich die Seite im Laufe der Entwicklung weiterentwickelt. +1

— Tom Lord

9

@MuhammadUmer Weil Tabellen Screenreader und viele Hilfsmittel verwirren, während CSS-Tabellen Präsentation und Inhalt trennen. Somit bleibt Ihr Formular für einen Bildschirmleser oder einen Leseassistenten leicht zu analysieren und wird dennoch gut angezeigt.

— Clément

3

Nun, das passende Etikett in td deutet darauf hin, dass es Teil von organisierten, tabellarischen Daten wie Diagrammen ist. das ist hier nicht der Fall. Die Verwendung von HTML-Tabellen erschwert es außerdem, das Layout in Zukunft zu ändern oder es an verschiedene Bildschirmgrößen anzupassen (z. B. Mobiltelefone und Tablets).

— Clément

4

Ich habe mich der CSS-Tabellenstruktur mit dem gleichen Argument, das @MuhammadUmer vorgebracht hat, bis heute stark widersetzt! Ich gab nach und beschloss, es zu versuchen und endlich den Wert des Wechsels zu sehen! Plus, sein CSS, macht so die Dinge auf lange Sicht einfacher

— BillyNair

2

Wie können Sie mit dieser Lösung Spalten überspannen? Zum Ausrichten der Schaltfläche "Senden" zentrieren.

— Eugenekr

31

Eine einfache Lösung für Sie, wenn Sie mit HTML noch nicht vertraut sind, besteht darin, eine Tabelle zu verwenden, um alles auszurichten.

<form>
  <table>
    <tr>
      <td align="right">First Name:</td>
      <td align="left"><input type="text" name="first" /></td>
    </tr>
    <tr>
      <td align="right">Last Name:</td>
      <td align="left"><input type="text" name="last" /></td>
    </tr>
    <tr>
      <td align="right">Email:</td>
      <td align="left"><input type="text" name="email" /></td>
    </tr>
  </table>
</form>

— amonett
quelle

43

Schnelle und einfache Lösung. Verlassen Sie die religiösen CSS-Debatten für die Mittagspause und erledigen Sie die Arbeit.

— Emmanuel Bourg

3

@ClarkeyBoy - wen interessiert es, solange es den Job macht.

— SolidSnake

1

@ ClarkeBoy - ignorantester Kommentar? lol .. Ich will mich hier nicht mit dir streiten .. wenn du es auf die Divs-Art machen willst, mach es. Wenn du es machen willst, liegt es ganz bei dir. Aber nehmen Sie nicht an, dass sich alle Kunden oder Personen darum kümmern werden. Die meisten von ihnen kümmern sich darum, die Arbeit zu erledigen.

— SolidSnake

2

@ ClarkeBoy - Lesen Sie diese Antwort und den Beitrag von W3C: stackoverflow.com/a/4707368/40411

— J. Polfer

6

@EmmanuelBourg: Ist das nicht genau das, wofür CSS-Tabellen gedacht sind? Ein tabellenartiges Layout erreichen, ohne die Bildschirmleser zu verwirren? Das Layout, das das OP verlangt, ist eigentlich ziemlich einfach mit CSS-Tabellen zu erreichen (siehe unten )

— Clément

17

Ich finde es viel einfacher, die Anzeige der Beschriftungen in Inline-Block zu ändern und eine Breite festzulegen

label {
    display: inline-block;
    width:100px;
    text-align: right;
}

— Byron
quelle

9

Sie sollten eine Tabelle verwenden. Aus logischen Gründen sind die Daten tabellarisch: Aus diesem Grund möchten Sie, dass sie ausgerichtet werden, da Sie zeigen möchten, dass die Beschriftungen in einer zweidimensionalen Struktur nicht nur mit ihren Eingabefeldern, sondern auch miteinander in Beziehung stehen.

[Überlegen Sie, was Sie tun würden, wenn anstelle von Eingabefeldern Zeichenfolgen oder numerische Werte angezeigt würden.]

— Collin Street
quelle

2

Ich schätze Ihren Ansatz.

— Jono

2

Aus diesem Grund ziehe ich es vor, eine korrekte HTML-Semantik beizubehalten und ein möglichst einfaches CSS zu verwenden.

So etwas würde den Job machen:

label{
  display: block;
  float: left;
  width : 120px;    
}

Ein Nachteil ist jedoch, dass Sie möglicherweise für jedes Formular die richtige Etikettenbreite auswählen müssen. Dies ist nicht einfach, wenn Ihre Etiketten dynamisch sein können (z. B. I18N-Etiketten).

— Samuel EUSTACHI
quelle

1

Ich bin ein großer Fan von Definitionslisten.

<dl>
<dt>Username:</dt>
<dd><input type="text" name="username" /></dd>
<dt>Password:</dt>
<dd><input type="password" name="password" /></dd>
</dl>

Sie lassen sich einfach mit CSS formatieren und vermeiden das Stigma, Tabellen für das Layout zu verwenden.

— Andrew
quelle

Dies ist mit divs genauso einfach zu erreichen (a hat ddnur einen linken Rand von ~ 40px) und vermeidet jede semantische Verwirrung. Außerdem ordnet keines dieser Elemente die Beschriftungen / Eingänge in derselben Zeile an.

— Hollister

1

mit CSS

.containerdiv label {
  float:left;
  width:25%;
  text-align:right;
  margin-right:5px; /* optional */
}
.containerdiv input {
  float:left;
  width:65%;
}

das gibt dir so etwas wie:

           label1 |input box             |
    another label |another input box     |

— Gjaa
quelle

Sie müssen auch verwenden clear, um zu vermeiden, dass sich Formulare beispielsweise für geringere Breiten

— stapeln

0

Die traditionelle Methode ist die Verwendung einer Tabelle.

Beispiel:

<table>
  <tbody>
     <tr>
        <td>
           First Name:
        </td>
        <td>
           <input type="text" name="first">
        </td>
     </tr>
     <tr>
        <td>
           Last Name:
        </td>
        <td>
           <input type="text" name="last">
        </td>
     </tr>
  </tbody>
</table>

Viele würden jedoch argumentieren, dass Tabellen einschränken und CSS bevorzugen. Der Vorteil der Verwendung von CSS besteht darin, dass Sie verschiedene Elemente verwenden können. Aus Divs, geordneten und ungeordneten Listen können Sie das gleiche Layout erstellen.

Am Ende möchten Sie das verwenden, mit dem Sie sich am wohlsten fühlen.

Hinweis: Tabellen sind einfach zu beginnen.

— OV Weblösungen
quelle

1

+1 für die Angabe, dass es einfach ist, mit ihnen zu beginnen ... aber Entwickler sollten wirklich nur auf Tabellen für Daten zurückgreifen (siehe meinen Kommentar zu einer anderen Antwort für volle Beschimpfungen!)

— ClarkeyBoy

1

Die Verwendung von CSS-Tabellen ist ebenso einfach und weist keine damit verbundenen Probleme mit der Barrierefreiheit auf. Siehe meine Antwort unten.

— Clément

0

Für die Grundlagen können Sie versuchen, sie in der Tabelle auszurichten. Die Verwendung von Tabellen ist jedoch schlecht für das Layout, da Tabellen für Inhalte gedacht sind.

Was Sie verwenden können, sind CSS-Floating-Techniken.

CSS-Code

.styleform label{float:left;}
.styleform input{margin-left:200px;} /* this gives space for the label on the left */
.styleform .clear{clear:both;} /* prevent elements from stacking weirdly */

HTML

<div class="styleform">
<form>
<label>First Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Last Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Email:</label><input type="text" name="first" /><div class="clear"></div>
</form>
</div>

Ein ausführlicher Artikel, den ich geschrieben habe, beantwortet die Frage des IE7-Float-Problems: IE7-Float-Right-Probleme

— Mauris
quelle

Vielen Dank für die Beispiele, aber das HTML-Formular löst das Problem immer noch nicht. Wenn Sie beispielsweise "Vorname" in einem von ihnen in "Name" ändern, habe ich das gleiche Problem wie beim ersten Mal

— Yoshyosh,

Ich habe damit von Designern gearbeitet und es ist ein wenig zerbrechlich, IME. Für dieses Grundlayout ist es in 98% der Fälle in Ordnung. Versuchen Sie, zu komplex zu werden, z. B. zweispaltiges Layout oder mehrzeilige Beschriftungen, und es wird schwierig.

— Statik

1

@staticsan - Wenn Sie Floats, Clearings und Divs verstehen, funktionieren Sie mit einem solchen Layout einwandfrei. Tatsächlich werden sie schneller gerendert und sind flexibler als Tabellen in modernen Browsern.

— Mauris

Nun, ich dachte, ich verstehe Floats, Cleares und Divs, aber ich konnte die Form, die mir gegeben wurde, nicht erweitern, ohne dass sie brach. Ob es ein Fehler in meinem Verständnis oder in der Implementierung des Designers war, die Tatsache blieb, dass es fragil war. (Interessanterweise wird die nächste Version eher ein Hybrid-Design mit ulTags verwenden.)

— Statik

0

Ich weiß, dass dies bereits beantwortet wurde, aber ich habe einen neuen Weg gefunden, sie gut auszurichten - mit einem zusätzlichen Vorteil - siehe http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/

Grundsätzlich verwenden Sie das Beschriftungselement um die Eingabe und richten es folgendermaßen aus:

<label><span>Name</span> <input /></label>
<label><span>E-Mail</span> <input /></label>
<label><span>Comment</span> <textarea></textarea></label>

und dann mit css richten Sie einfach aus:

label {
    display:block;
    position:relative;
}

label span {
    font-weight:bold;
    position:absolute;
    left: 3px;
}

label input, label textarea, label select {
    margin-left: 120px;    
}

Sie brauchen keine unordentlichen Br, die für Zeilenumbrüche herumliegen - das heißt, Sie können schnell ein mehrspaltiges Layout dynamisch erstellen
Die gesamte Zeile kann angeklickt werden. Insbesondere für Kontrollkästchen ist dies eine große Hilfe.
Das dynamische Ein- und Ausblenden von Formularzeilen ist einfach (Sie suchen nur nach der Eingabe und verbergen deren übergeordnetes Element -> die Beschriftung).
Sie können dem gesamten Etikett Klassen zuweisen, um die Fehlereingabe viel deutlicher anzuzeigen (nicht nur um das Eingabefeld herum).

— Niko
quelle

Schön, braucht aber eine feste Etikettenbreite. Der Text eines großen Etiketts überschreibt die Eingabe.

— Mauretto

0

Cléments Antwort ist bei weitem die beste. Hier ist eine etwas verbesserte Antwort, die verschiedene mögliche Ausrichtungen zeigt, einschließlich Links-Mitte-Rechts-ausgerichteter Schaltflächen:

label
{	padding-right:8px;
}

.FAligned,.FAlignIn
{	display:table;
}

.FAlignIn
{	width:100%;
}

.FRLeft,.FRRight,.FRCenter
{	display:table-row;
	white-space:nowrap;
}

.FCLeft,.FCRight,.FCCenter
{	display:table-cell;
}

.FRLeft,.FCLeft,.FILeft
{	text-align:left;
}

.FRRight,.FCRight,.FIRight
{	text-align:right;
}

.FRCenter,.FCCenter,.FICenter
{	text-align:center;
}

<form class="FAligned">
	<div class="FRLeft">
		<p class="FRLeft">
			<label for="Input0" class="FCLeft">Left:</label>
			<input id="Input0" type="text" size="30"  placeholder="Left Left Left" class="FILeft"/>
		</p>
		<p class="FRLeft">
			<label for="Input1" class="FCRight">Left Right Left:</label>
			<input id="Input1" type="text" size="30"  placeholder="Left Right Left" class="FILeft"/>
		</p>
		<p class="FRRight">
			<label for="Input2" class="FCLeft">Right Left Left:</label>
			<input id="Input2" type="text" size="30"  placeholder="Right Left Left" class="FILeft"/>
		</p>
		<p class="FRRight">
			<label for="Input3" class="FCRight">Right Right Left:</label>
			<input id="Input3" type="text" size="30"  placeholder="Right Right Left" class="FILeft"/>
		</p>
		<p class="FRLeft">
			<label for="Input4" class="FCLeft">Left Left Right:</label>
			<input id="Input4" type="text" size="30"  placeholder="Left Left Right" class="FIRight"/>
		</p>
		<p class="FRLeft">
			<label for="Input5" class="FCRight">Left Right Right:</label>
			<input id="Input5" type="text" size="30"  placeholder="Left Right Right" class="FIRight"/>
		</p>
		<p class="FRRight">
			<label for="Input6" class="FCLeft">Right Left Right:</label>
			<input id="Input6" type="text" size="30"  placeholder="Right Left Right" class="FIRight"/>
		</p>
		<p class="FRRight">
			<label for="Input7" class="FCRight">Right:</label>
			<input id="Input7" type="text" size="30"  placeholder="Right Right Right" class="FIRight"/>
		</p>
		<p class="FRCenter">
			<label for="Input8" class="FCCenter">And centralised is also possible:</label>
			<input id="Input8" type="text" size="60"  placeholder="Center in the centre" class="FICenter"/>
		</p>
	</div>
	<div class="FAlignIn">
		<div class="FRCenter">
			<div class="FCLeft"><button type="button">Button on the Left</button></div>
			<div class="FCCenter"><button type="button">Button on the Centre</button></div>
			<div class="FCRight"><button type="button">Button on the Right</button></div>
		</div>
	</div>
</form>

Erweitern Sie das Snippet

Ich habe rechts von allen Beschriftungen ( padding-right:8px) einige Auffüllungen hinzugefügt , um das Beispiel etwas weniger schrecklich aussehen zu lassen. Dies sollte jedoch in einem realen Projekt sorgfältiger erfolgen (das Hinzufügen von Auffüllungen zu allen anderen Elementen wäre ebenfalls eine gute Idee).

— Cyberknight
quelle

-1

CSS Ich habe dieses Problem gelöst, ähnlich wie Gjaa, aber besser gestylt

p
{
    text-align:center;
        }
.styleform label
{
    float:left;
    width: 40%;
    text-align:right;
    }
.styleform input
{
    float:left;
    width: 30%;
    }

Hier ist mein HTML-Code, der speziell für ein einfaches Registrierungsformular ohne PHP-Code verwendet wird

<form id="registration">
    <h1>Register</h1>
    <div class="styleform">
    <fieldset id="inputs">
        <p><label>Name:</label> 
          <input id="name" type="text" placeholder="Name" autofocus required>
        </p>
        <p><label>Email:</label>   
          <input id="email" type="text" placeholder="Email Address" required>
        </p>
        <p><label>Username:</label>
          <input id="username" type="text" placeholder="Username" autofocus required>
        </p>
        <p>   
          <label>Password:</label>
          <input id="password" type="password" placeholder="Password" required>
        </p>
    </fieldset>
    <fieldset id="actions">

    </fieldset>
    </div>
    <p>
          <input type="submit" id="submit" value="Register">
          </p>

Es ist sehr einfach und ich fange gerade erst an, aber es hat ganz gut funktioniert

— PA_Commons
quelle

-1

Fügen Sie Eingabe-Tags in eine ungeordnete Liste ein. Machen Sie den Stiltyp none. Hier ist ein Beispiel.

<ul>
Input1     
<li> <input type="text" />
Input2
<li> <input type="text" />
<ul/>

Hat für mich gearbeitet!

— Vivek Iyer
quelle

Das würde niemals funktionieren. ULwürde nur den Inhalt vom Rand weg einrücken, nichts ausrichten. Wenn Sie das inputs LIeinfügen, wird nur ein Aufzählungszeichen vor ihnen eingefügt (ja, sie werden als Liste und nicht an den Beschriftungen ausgerichtet). Außerdem würde "Input2" beim vorherigen inputElement bleiben , da die LInicht geschlossen sind (es gibt keine </li>) und es keinen Start <li>für dieses "Label" gibt, so dass es so behandelt wird, wie es sollte. Daher wird allgemeiner Text mit dem verknüpft vorheriges Element. Zuletzt hat der Code einen Fehler, das Schließen <ul/>sollte sein </ul>.

— Cyberknight

-2

<form>
    <div>
        <label for='username'>UserName</label>
        <input type='text' name='username' id='username' value=''>  
    </div>
</form>

Im CSS müssen Sie sowohl Beschriftung als auch Eingabe als Anzeige deklarieren: Inline-Block und Breite entsprechend Ihren Anforderungen angeben. Hoffe das wird dir helfen. :) :)

— kta
quelle

-4

Einfach hinzufügen

<form align="center ></from>

Setzen Sie einfach Align in das öffnende Tag.

— Zak Gill
quelle

Dies würde nicht funktionieren, da formes kein alignAttribut gibt (und selbst wenn dies der Fall wäre, würde es für die Verwendung von Stil / CSS veraltet sein). Auch das schließende Tag ist falsch, sollte es sein </form>. Es ist möglich , zu definieren , style="text-align:center"innerhalb dem form, was den ganzen Inhalt des Formulars in der Mitte ausrichten würde, aber das ist nicht das, was die ursprüngliche Frage ging. Dies würde die Beschriftungen niemals an ihren Eingabefeldern ausrichten (ja, ich habe auf Firefox 75 getestet, nur um sicherzugehen).

— Cyberknight