Formular, Formatierungsproblem

[Michael]

Ich habe ein Formulierungs Problem in einem HTML Formular. Es geht um ein Formular das 3 Felder hat. ein INPUT Feld, ein SELECT Feld, und den BUTTON

das Ziel das ich habe, es soll genau 100% Breit werden, sich also immer an die Seite, der Box etc anpasst!

.box{ width:80%;}
input[type="text"]{width:37%; border: 1px solid #c0c0c0; padding:1%;}	
select {width:37%; border: 1px solid #c0c0c0; padding:1%;} 		
.button {width:20%; border: 1px solid #c0c0c0; padding:1%;}  

Ich muss aber die Prozentzahl herunternehmen, da ich durch den Rahmen über 100% komme! Wie schaffe ich es das es genauso Breit ist wie ich das möchte?

<div class="box">
select name="sort" size="1"> 
<option value="0">inhalt</option>
</select>
<input type="text" name="suche">
<input  class="button" name="send" value="button"  type="submit"  />
</div>

[MrMurphy1]

Hallo,

da gibt es verschiedene Lösungen.

Erstens: Das border-box-Modell auf den Inhalt von .box anwenden:

box-sizing: border-box;

Zweitens: Die seitlichen border-Breiten auch in % angeben

Drittens: Mit calc die Breiten von padding, border und gegebenenfalls margin von den Elementbreiten abziehen

Gruss

MrMurphy

[Auge]

Hallo

Ich habe ein Formulierungs Problem in einem HTML Formular. Es geht um ein Formular das 3 Felder hat. ein INPUT Feld, ein SELECT Feld, und den BUTTON

das Ziel das ich habe, es soll genau 100% Breit werden, sich also immer an die Seite, der Box etc anpasst!

Ich muss aber die Prozentzahl herunternehmen, da ich durch den Rahmen über 100% komme! Wie schaffe ich es das es genauso Breit ist wie ich das möchte?

Grundsätzlich kannst du Dimensionen mit calc berechnen lassen.

input[type="text"]{
  width: calc(37% - 2px - 2%); /* Breite - zwei Borders - zwei Prozent Padding */
  border: 1px solid #c0c0c0;
  padding: 1%;
}

Denke aber daran, dass das Formular auf Geräten mit schmalem/kleinem Viewport schnell unbenutzbar werden kann. Ordne dort deine Elemente mit Media-Queries anders, (z.B. untereinander) an.

Tschö, Auge

[Gunnar Bittersmann]

@@Michael

Ich habe ein Formulierungs Problem in einem HTML Formular.

Und du hast zwei Deppenleerzeichen. Kann ich eins davon abhaben, bitte?

Es geht um ein Formular das 3 Felder hat.

2 Felder, eigentlich. Und beide haben keine Beschriftung. Sollten sie aber haben, sonst ist das Formular nicht barrierefrei benutzbar.

ein INPUT Feld, ein SELECT Feld, und den BUTTON

Ein Button ist kein Eingabefeld. Es bietet sich daher an, für Buttons nicht das für Eingabefelder vorgesehene input-Element zu verwenden, sondern das für Buttons vorgesehene button-Element.

<div class="box">
select name="sort" size="1"> 
<option value="0">inhalt</option>
</select>
<input type="text" name="suche">
<input  class="button" name="send" value="button"  type="submit"  />
</div>

Sagtest du nicht, du hättest ein Formular? Wo isses denn? Ohne form-Element kein Formular. Ein Absendebutton ist recht sinnfrei, wenn es keine Adresse gibt, wo die Formulareingaben denn hingeschickt werden.

Ein Sucheingabefeld sollte übrigens vom Typ search sein, nicht text.

LLAP 🖖