Kontaktformular 3 Spaltig
Moin Leude,
ich schreibe gerade ein Kontaktformular und bin indem Zug dabei, meine Html und CSS-Kenntnisse wieder aufzufrischen.
Im Prinzip ist es ein ganz einfaches Formular im Grundkonstrukt, also noch ohne Submit-Funktionen.Das Formular soll z.B.: 1-3 spaltig sein.
Mit meinem Code erreiche ich das zwar, ich frage mich aber, ob man dass noch eleganter und besser lösen kann, deshalb würde ich gerne Eure Meinung hören:
Was meint Ihr dazu?
ich schreibe gerade ein Kontaktformular und bin indem Zug dabei, meine Html und CSS-Kenntnisse wieder aufzufrischen.
Im Prinzip ist es ein ganz einfaches Formular im Grundkonstrukt, also noch ohne Submit-Funktionen.Das Formular soll z.B.: 1-3 spaltig sein.
Mit meinem Code erreiche ich das zwar, ich frage mich aber, ob man dass noch eleganter und besser lösen kann, deshalb würde ich gerne Eure Meinung hören:
<style type="text/css">
.contactform_3_columns{
border:1px solid #e2e2e2;
padding:20px 20px;
display:inline-block;
background:#fff;
}
#left
{
float:left;
margin-right:10px;
}
.label, #sonstiges, #function
{
font-family:arial;
}
#send_bttn
{
background:#e2e2e2;
color:#000;
font-size:20px;
padding:10px 10px;
}
clear{
clear:both;
}
</style>
<form>
<div class="contactform_3_columns">
<div id="left">
<p>Firma</p>
<input type="text" name="Firma" class="form-text Firma required" id="Firma-<?php echo $i++;?>" />
</div>
<div id="left">
<p>Vorname</p>
<input type="text" name="Vorname" class="form-text Vorname required" id="Vorname-<?php echo $i++?>"/>
</div>
<div id="left">
<p>Name</p>
<input type="text" name="Name" class="form-text Name required" id="Name-<?php echo $i++?>"/>
</div>
<br>
<br>
<br>
<br>
<br>
<div id="left">
<label id="function" >Funktion</label>
<select name="Funktion" class="form-select Funktion required" id="Funktion-<?php echo $i++?>" size="1"/>
<option>Bitte Funktion auswählen</option>
<option>Geschäftsführer</option>
<option>Vertriebsleiter</option>
<option>Vertrieb</optionrequired>
<option>Sonstiges</option>
</select>
</div>
<br>
<br>
<div id="left">
<label id="sonstiges">Sonstiges</label>
<input type="text" name="Sonstiges" class="form-text Sonstiges required" id="Sonstiges-<?php echo $i++?>" value="(nur, wenn ausgewählt)"/>
</div>
<br>
<br>
<div id="left">
<p>Strasse</p>
<input type="text" name="Strasse" class="form-text Strasse required" id="Strasse-<?php echo $i++?>"/>
</div>
<div id="left">
<p>PLZ</p>
<input type="text" name="PLZ" class="form-text PLZ required" id="PLZ-<?php echo $i++?>"/>
</div>
<div id="left">
<p>ORT</p>
<input type="text" name="ORT" class="form-text ORT required" id="ORT-<?php echo $i++?>"/>
</div>
<br>
<br>
<br>
<br>
<div id="left">
<p>Telefon</p>
<input type="text" name="Telefon" class="form-text Telefon required" id="Telefon-<?php echo $i++?>"/>
</div>
<div id="left">
<p>Email</p>
<input type="text" name="Email" class="form-text Email required" id="Email-<?php echo $i++?>"/>
</div>
<div class="clear"></div>
</div>
<p><input id="send_bttn" type="submit" value="Artikelliste abschicken" /></p>
</form>
Was meint Ihr dazu?
Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 341664
Url: https://administrator.de/contentid/341664
Ausgedruckt am: 25.11.2024 um 20:11 Uhr
1 Kommentar
Hallo,
Gruß,
Atze
Was meint Ihr dazu?
Die ganzen Zeilenumbrüche. Schrecklich! Ich empfehle Bootstrap und deren Gridsystem: http://getbootstrap.com/css/#gridGruß,
Atze