wescraven07
Goto Top

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:

<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?

Content-Key: 341664

Url: https://administrator.de/contentid/341664

Ausgedruckt am: 19.03.2024 um 10:03 Uhr

Mitglied: atze187
atze187 05.07.2017 um 10:16:46 Uhr
Goto Top
Hallo,

Was meint Ihr dazu?
Die ganzen Zeilenumbrüche. Schrecklich! Ich empfehle Bootstrap und deren Gridsystem: http://getbootstrap.com/css/#grid

Gruß,
Atze