16Ιούν

Σχεδιάστε φόρμες με CSS χωρίς την χρήση των tables

, 16 Ιουνίου 2008 | WEB DESIGN - AUTHORING | 3 Σχόλια

Εάν δεν επιθυμείτε να χρησιμοποιείτε tables στην σχεδίαση μιας online φόρμας μπορείτε να εφαρμόσετε την τεχνική που θα σας προβάλλουμε σήμερα.

Μπορείτε να χρησιμοποιήσετε την συγκεκριμένη τεχνική CSS για να διαμορφώσετε την φόρμα και να δώσετε την αισθητική δομής σχεδιασμένο με tables. Θεωρούμε την χρήση tables πιο γρήγορη διαδικασία στο συγκεκριμένο θέμα, αφού απαιτείται ελάχιστος χρόνος υλοποίησης του. Πάντως για τους web designers που είναι «λάτρεις» των divs και θέλουν αυστηρά tableless authoring μπορούν να προσαρμόσουν την παρακάτω τεχνική.

1. Κώδικας HTML
Χρησιμοποιώντας το <label> και <span> tag μπορείτε να σχεδιάσετε την φόρμα προβάλλοντας τα στοιχεία που επιθυμείτε. Επίσης όλα τα στοιχεία θα πρέπει να έχουν την CSS παράμετρο ορισμένη στο float left (float:left;)

<div id=«stylized» class=«myform»>
<form id=«form» name=«form» method=«post» action=«index.html»>
<h1>Sign-up form</h1>
<p>This is the basic look of my form without table</p>

<label>Name
<span class=«small»>Add your name</span>
</label>
<input type=«text» name=«name» id=«name» />

<label>Email
<span class=«small»>Add a valid address</span>
</label>
<input type=«text» name=«email» id=«email» />

<label>Password
<span class=«small»>Min. size 6 chars</span>
</label>
<input type=«text» name=«password» id=«password» /><button type=«submit»>Sign-up</button>
<div class=«spacer»></div>

</form>
</div>

Στην συγκεκριμένη εικόνα μπορείτε να δείτε πως διαμορφώνετε ο κώδικας εν σχέση με το CSS:

2. Κώδικας CSS
Συνδέστε το αρχείο σας (style sheet) με το CSS τοποθετώντας τον παρακάτω κώδικα πάνω από το *<head>* ή σαν εξωτερικό στοιχείο.

body{
font-family:»Lucida Grande», «Lucida Sans Unicode», Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ———– My Form ———– */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}

/* ———– stylized ———– */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}

Το σχετικό παράδειγμα είναι δυνατόν να διαμορφωθεί αλλάζοντας το CSS σύμφωνα με το κάθε εικαστικό σας.

Πηγή πληροφορίας είναι το woork.blogspot.com

ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Σχεδιάστε φόρμες με CSS χωρίς την χρήση των tables γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.

3 comments so far

Σχολιάστε

Back to top

Recent comments

  • Ευχαριστούμε για το σχόλιο Ευγενία. Δυστυχώς δεν γνωρίζουμε αν υπάρχει παρόμοια γραμματοσειρά με την ENGLAND HAND στα Ελληνικά.

    10 δωρεάν καλλιγραφικές γραμματοσειρές
  • Πολύ χρήσιμο άρθρο. Ο αλγόριθμος της Google εξελίσσεται και μαζί του και η τέχνη του seo. Θα έλεγα ότι ωθεί τους seo experts σε μια πιο ολιστική προσέγγιση της online παρουσίας των πελατών τους. Αυτο σημαίνει ότι θα πρέπει να εμπλακούν σε θέματα content strategy, branding και social media γιατί η Google συνυπολογίζει όλα αυτά όταν αποφασίζει για το ranking μιας ιστοσελίδας. Ειδικά το content είναι το κλειδί στην νέα εποχή του search engine optimization. Θα πρέπει να δημιουργείται έχοντας στο μυαλό μας κυρίως τον επισκέπτη της ιστοσελίδας μας και λιγότερο τις μηχανές αναζήτησης. Θα πρέπει να προσθέτει πραγματικό value στους αναγνώστες του και ιδεατά να έχει χαρακτηριστικά που να συμβάλλουν στη δημιουργία buzz στα social media. Με τον τρόπο αυτό θα δημιουργηθούν με φυσικό τρόπο

    Google Panda 3.3, Google Venice και 38 επιπλέον αλλαγές στον αλγόριθμο της Google

Latest From Twitter