html textbox und combobox

The Hit-Man · Donnerstag 2. Oktober 2014, 09:30

ich befasse mich gerade nen bischen mit pycherry.
im html code habe ich eine testbox und unter der textbox eine combobox. allerdings sieht das nen bischen komisch aus, da die combobox, nicht die länge hat, wie die textbox. des weiteren habe ich die beiden elemente schon in einer tabelle verschachtelt.
gibts es ne elegante möglichkeit die länge von einer textbox und die da drunterliegende combobox auf die ein und die selbe länge zu bekommen:

mein code bis jetzt:

<html><head><link href="/static/css/style.css" rel="stylesheet"></head><body><form><fieldset><table><tr><td><label for="username">Benutzer:</label><td><td><input type="text" size="20" maxlength="20" name="username"></td><tr><td><label for="combo">Combobox:</label><td><td><select><option size="40" maxlength="20" name=one value=1>groesse festlegen</option></select></td></tr</tr</table></fieldset></form></body></html>

sieht ein wenig wild aus.

Sirius3 · Donnerstag 2. Oktober 2014, 10:07

@The Hit-Man: Wenn Du den css-style width auf 100% setzt, wird immer der gesamte Platz ausgefüllt. Da es sich aber um System-Elemente handelt, ist die Darstellung von Browser zu Browser unterschiedlich, so dass es sehr schwierig ist, gleiches Aussehen zu erreichen.

BlackJack · Donnerstag 2. Oktober 2014, 10:24

@The Hit-Man: Gegen das „ein wenig wild aussehen” kann man etwas machen. Das ist ja nicht nur nich ordentlich formatiert, sondern auch kaputtes HTML. Die Tags passen nicht zusammen Start/Endtags stimmen nicht und einige sind syntaktisch nicht einmal vollständig. Bevor man sich daran macht das aussehen im Browser zu regeln, sollte man vielleicht erst einmal korrektes HTML haben.

Beim <select> fehlt der Name.

<option> kennt kein `name`-Attribut und auch `maxsize` und `size` gibt es nicht. Bei HTML funktioniert wild herum raten genausowenig wie bei Programmiersprachen.

Code: Alles auswählen

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link href="/static/css/style.css" rel="stylesheet">
    <style type="text/css">
      /* This should actually go into an external css file. */
      .form input, .form select { width: 20em; }
    </style>
  </head>
  <body>
    <form class="form">
      <fieldset>
        <table>
          <tr>
            <td><label for="username">Benutzer:</label></td>
            <td>
              <input type="text" size="20" maxlength="20" name="username">
            </td>
          </tr>
          <tr>
            <td><label for="combo">Combobox:</label></td>
            <td>
              <select name="combo">
                <option value="1">groesse festlegen</option>
              </select>
            </td>
          </tr>
        </table>
      </fieldset>
    </form>
  </body>
</html>

Ich persönlich bin ja ein Fan von Bootstrap. Das nimmt einem viel CSS-Arbeit ab und ist besser Crossbrowser-getestet als man das in der Regel selber macht.

The Hit-Man · Donnerstag 2. Oktober 2014, 11:37

das der code so wild ist, liegt da dran, das ich mir in einem string, meine html sache zusammen baue, komplett mit den elementen.
ich werde mir aber genau noch mal die html sachen anschauen.
boostrap kenne ich gar nicht. werde ich mir auch anschauen, danke.

BlackJack · Donnerstag 2. Oktober 2014, 12:09

@The Hit-Man: Um HTML „zusammenzubauen” verwendet man üblicherweise ein Templatesystem.