Comment créer de la bonne recherche, sans table, Css, Tutorials |

Comment créer de la bonne recherche, sans table

Ce tutoriel explique comment concevoir une bonne forme avec une serviette propre conception CSS avec seulement l'étiquette et de la contribution des balises HTML pour simuler une structure de table. Vous pouvez utiliser les CSS / HTML des éléments pour la conception de votre formulaire personnalisé de vos projets web:

form-17

Etape 1: Créer la structure HTML de base


 > <h1> Contact Form : </h1> <label> <span> Full name </span> <input type = "text" class = "input_text" name = "name" id = "name" / > </label> <label> <span> Email </span> <input type = "text" class = "input_text" name = "email" id = "email" / > </label> <label> <span> Subject </span> <input type = "text" class = "input_text" name = "subject" id = "subject" / > </label> <label> <span> Message </span> <textarea class = "message" name = "feedback" id = "feedback" > </textarea> <input type = "button" class = "button" value = "Submit Form" / > </label> </div> </form> <form> <div "box" class => <h1> Formulaire de contact: </ h1> <label> <span> Nom complet </ span> <input type = "text" class = "input_text" name = "name" id = "nom" /> </ label> <label> <span> Email </ span> <input type = "text" class = "input_text" name = "email" id = "email" /> </ label> <label> <span> Sujet </ span> <input type = "text" class = "input_text" name = "subject" id = "subject" /> </ label> <label> <span> Message </ span> <textarea class = "message" name = "feedback" id = "feedback"> </ textarea> <input type = "button" class = "button" value = "Submit Form" /> </ label> </ div> </ form>

Etape 2 Créer Code CSS


 ; padding : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; background : # 161712 ; } form,input,select,textarea { margin : 0 ; padding : 0 ; color : #ffffff ; } div .box { margin : 0 auto ; width : 500px ; background : # 222222 ; position :relative ; top : 50px ; border : 1px solid # 262626 ; } div .box h1 { color : #ffffff ; font-size : 18px ; text-transform :uppercase ; padding : 5px 0 5px 5px ; border-bottom : 1px solid # 161712 ; border-top : 1px solid # 161712 ; } div .box label { width : 100 %; display : block ; background : #1C1C1C ; border-top : 1px solid # 262626 ; border-bottom : 1px solid # 161712 ; padding : 10px 0 10px 0 ; } div .box label span { display : block ; color : #bbbbbb ; font-size : 12px ; float :left ; width : 100px ; text-align :right ; padding : 5px 20px 0 0 ; } div .box .input_text { padding : 10px 10px ; width : 200px ; background : # 262626 ; border-bottom : 1px double # 171717 ; border-top : 1px double # 171717 ; border-left : 1px double # 333333 ; border-right : 1px double # 333333 ; } div .box .message { padding : 7px 7px ; width : 350px ; background : # 262626 ; border-bottom : 1px double # 171717 ; border-top : 1px double # 171717 ; border-left : 1px double # 333333 ; border-right : 1px double # 333333 ; overflow :hidden ; height : 150px ; } div .box .button { margin : 0 0 10px 0 ; padding : 4px 7px ; background : #CC0000 ; border : 0px ; position : relative ; top : 10px ; left : 382px ; width : 100px ; border-bottom : 1px double # 660000 ; border-top : 1px double # 660000 ; border-left : 1px double #FF0033 ; border-right : 1px double #FF0033 ; } * (Margin: 0; padding: 0;) body (font: 100% normal Arial, Helvetica, sans-serif; background: # 161712;) formulaire de saisie, de sélectionner, textarea (margin: 0; padding: 0; color: # ffffff;) div. box (margin: 0 auto; width: 500px; background: # 222222; position: relative; top: 50px; border: 1px solid # 262626;) div. case h1 (color: # ffffff; font - size: 18px; text-transform: uppercase; padding: 5px 0 5px 5px; border-bottom: 1px solid # 161712; border-top: 1px solid # 161712;) div. case label (width: 100%; display: block; background: # 1C1C1C; border-top: 1px solid # 262626; border-bottom: 1px solid # 161712; padding: 10px 0 10px 0;) div. case label span (display: block; color: # bbbbbb; font-size: 12px; float: left; width: 100px; text-align: right; padding: 5px 20px 0 0;) div. boîte. input_text (padding: 10px 10px; width: 200px; background: # 262626; border-bottom: 1px double # 171717; border-top: 1px double # 171717; border-left: 1px double # 333333; border-right: 1px double # 333333;) div. boîte. message (padding: 7PX 7PX; width: 350px; background: # 262626 ; border-bottom: 1px double # 171717; border-top: 1px double # 171717; border-left: 1px double # 333333; border-right: 1px double # 333333; overflow: hidden; height: 150px;) div. boîte. button (margin: 0 0 10px 0; padding: 4px 7PX; background: # CC0000; border: 0px; position: relative; top: 10px; left: 382px; width: 100px; border-bottom: 1px double # 660000; border - top: 1px double # 660000; border-left: 1px double # FF0033; border-right: 1px double # FF0033;)