XHTML, CSS form

PhlegethoN · 13 Δεκεμβρίου 2010

Καλησπερα,

Κανοντας την πρωτη μου αποπειρα να φτιαξω ενα βασικο registration form με XHTML και CSS εγραψα τον παρακατω σχετικα απλο κωδικα:

register.html

><?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Register to ExampleSite.com</title>
<link rel="stylesheet" type="text/css" href="register.css" />
</head>

<body>

<h1><img src="images/regpic.gif" alt="Registration Banner"</h1>

<form method="post" action="http://bw.org/misc/cgi-test/test.cgi">
<table border="0" cellspacing="2" cellpadding="2" >

	<tr>
		<th align="left"><u>Essential Information</u></th>
	</tr>
	
	<tr>
		<td valign="top">Username:</td>
		<td class="notice"><input name="Username" type="text" /><br />
		Please enter the name by which you would like to log-in and be known on this site.</td>
	</tr>
	
	<tr>
		<td>Password:</td>
		<td><input name="pwd" type="password" /></td>
	</tr>

	<tr>
		<td valign="top">Confirm Password:</td>
		<td class="notice"><input name="pwd2" type="password" /><br />
		Please enter and confirm a password for your account.Passwords are case-sensitive.</td>
	</tr>

	<tr>
		<td>E-mail Address:</td>
		<td><input name="email" type="text" /></td>
	</tr>
	
	<tr>
		<td valign="top">Confirm E-mail Address:</td>
		<td class="notice"><input name="email2" type="text" /><br />
		Please enter and confirm a valid e-mail address.</td>
	</tr>
		
	<tr height="20"></tr>
	
	<tr>
		<th align="left"><u>Optional Details</u></th>
	</tr>

	<tr>
		<td valign="top">Accept E-mail from:</td>
		<td>Administrators<input type="checkbox" name="Administrators" checked="checked"><br />
			Other members<input type="checkbox" name="Members">
			<p class="notice">Sometimes administrators may want to contact you via e-mail. If you dont want to receive those e-mails deactivate this option.</p></td>
	</tr>
	
	<tr>
		<th align="left"><u>Site Rules</u></th>
	</tr> 

	<tr>
		<td></td>
		<td><iframe src ="content/rules.html" width="400" height="100" style="border: 1px solid #666">
		<p>Content for browsers that don't support iframe.</p>
		</iframe></td>
	</tr>
	
	<tr>
		<td></td>
		<td align="left">Accept<input type="radio" name="Agreement" value="Accept" checked="checked" />
		Decline<input type="radio" name="Agreement" value="Decline"/>
	</tr>
	
	<tr height="20"></tr>
	
	<tr>
		<td></td>
		<td><input type="image" name="submit" src="images/submit.gif" /><!--<input type="reset" value="Reset"> --></td>
	</tr>
	
</table>
</form>
</body>
</html>

register.css

>body {
   background-color: #307fba ;
color: #EAC117 ;
font-family: rockwell;
}

th {
font-family: Hobo Std, Segoe Print;
}

h1 { 
color: #fff
}

.notice {
font-size: 10pt;
}

Rules.html

><?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<style>
body {
   background-color: #eee;
   font-size: 8pt;
   color: #003;
}

h1.heading {
   font-size: 150%;
   text-align: center;
   margin: 0 0 0 0;
}

p {
   text-align: justify;
}

</style>

<head>
 <title>ExapleSite.com Rules</title>
</head>

<body>

<h2>User Agreement</h2>

<p>
This product is meant for educational purposes only. Any resemblance to real 
persons, living or dead is purely coincidental. Void where prohibited. Some 
assembly required. List each check separately by bank number. Batteries not 
included. Contents may settle during shipment. Use only as directed. No 
other warranty expressed or implied. Do not use while operating a motor 
vehicle or heavy equipment. Postage will be paid by addressee. Subject to 
CAB approval. This is not an offer to sell securities. Apply only to 
affected area. May be too intense for some viewers. Do not stamp. Use 
other side for additional listings. For recreational use only. Do not 
disturb. All models over 18 years of age. If condition persists, consult 
your physician. No user-serviceable parts inside. Freshest if eaten before 
date on carton. Subject to change without notice. Times approximate. 
</p>
<p>
Simulated picture. No postage necessary if mailed in the United States. 
Breaking seal constitutes acceptance of agreement. For off-road use only. As 
seen on TV. One size fits all. Many suitcases look alike. Contains a 
substantial amount of non-tobacco ingredients. Colors may, in time, fade. We 
have sent the forms which seem to be right for you. Slippery when wet. For 
office use only. Not affiliated with the American Red Cross. Drop in any 
mailbox. Edited for television. Keep cool; process promptly. Post office will 
not deliver without postage. List was current at time of printing. Return to 
sender, no forwarding order on file, unable to forward. Not responsible for 
direct, indirect, incidental or consequential damages resulting from any 
defect, error or failure to perform. At participating locations only. Not the 
Beatles. Penalty for private use. See label for sequence. Substantial penalty 
for early withdrawal. 
</p>
<p>
Do not write below this line. Falling rock. Lost ticket pays maximum rate. 
Your canceled check is your receipt. Add toner. Place stamp here. Avoid 
contact with skin. Sanitized for your protection. Be sure each item is 
properly endorsed. Sign here without admitting guilt. Slightly higher west 
of the Mississippi. Employees and their families are not eligible. Beware of 
dog. Contestants have been briefed on some questions before the show. Limited 
time offer, call now to insure prompt delivery. You must be present to win. 
No passes accepted for this engagement. No purchase necessary. Processed at 
location stamped in code at top of carton. Shading within a garment may occur. 
</p>
<p>
Use only in well-ventilated area. Keep away from fire or flame. Replace with 
same type. Approved for veterans. Booths for two or more. Check here if tax 
deductible. Some equipment shown is optional. Price does not include taxes. 
No Canadian coins. Not recommended for children. Prerecorded for this time 
zone. Reproduction strictly prohibited. No solicitors. No alcohol, dogs, or 
horses. No anchovies unless otherwise specified. Restaurant package, not for 
resale. List at least two alternate dates. First pull up, then pull down. 
Call toll free before digging. Driver does not carry cash. Some of the 
trademarks mentioned in this product appear for identification purposes 
only. Record additional transactions on back of previous stub.
</p>
<p>
This supersedes all previous notices.</p>
</p> 

</body>
</html>

Αν και το αποτελεσμα στον firefox εμφανιζεται οπως το περιμενα, σε αλλους browsers οπως τον IE και τον Chrome το αποτελεσμα ειναι αλλα αντ'αλλων.

Απο οτι καταλαβαινω δεν πρεπει να υποστηριζονται οι γραμματοσειρες που επελεξα αλλα και εκτος αυτου το χρωμα/μεγεθος των γραμματων ειναι διαφορετικο.

Ειναι σφαλμα του κωδικα μου? Πως μπορω να κανω το συγκεκριμενο html να εμφανιζεται το ιδιο στους τρεις τουλαχιστον βασικους browsers (Firefox, Chrome, EI)?

bnvdarklord · 13 Δεκεμβρίου 2010

Σου προτεινω να βαλεις καποια πιο απλή γραμματοσειρα, γιατι αλλιως θα φαινεται οπως θες μονο σε υπολογιστες που την εχουν.(εκτος αν η rockwell ειναι κλασσικη και δεν την ξερω απλά.) Αν εχεις και αλλα προβληματα βαλε τον κωδικα της register εδω

http://validator.w3....lidate_by_input

και πατα check. Μου βγαζει 9 errors, ισως αν τα διορθωσεις να φτιαξει.

PhlegethoN · 13 Δεκεμβρίου 2010

Πωωω 1000 ευχαριστω φιλε bnvdarklord!

Το site σου μου εβαλε τα γυαλια. Εκτος απο το οτι ειχα καποια πολυ ηλιθια τυπογραφικα, το βασικο ηταν οτι ειχα ξεχασει να κλεισω το <img> tag! Για καποιο μυστηριο λογω στον firefox το παρεκαμψε αλλα ο IE το πηρε "στραβα"...

Η rockwell καθε αλλο παρα κλασικη θα την ελεγα (στην τυχη την επελεξα λογω εμφανισης), αλλα οκ εμφανιζεται κανονικα τωρα πλεον!

bnvdarklord · 13 Δεκεμβρίου 2010

Αν το θες για σενα το site οκ. Αλλα αν ειναι να το ανεβασεις καλυτερα να βαλεις καποια αλλη γιατι κανεις δεν θα την βλεπει, μιας και δεν θα ειναι εγκατεστημένη στο pc του.

PhlegethoN · 13 Δεκεμβρίου 2010

Οχι δεν εχω σκοπο να την ανεβασω καπου. Εχει 2-3 μερες που μαθαινω HTML και για εξασκηση απλα ειπα να φτιαξω ενα registration form να δω πως τα παω.

Θα το εχω υποψιν μου για τις γραμματοσειρες παντως. Thx.

digimyth · 13 Δεκεμβρίου 2010

Πωωω 1000 ευχαριστω φιλε bnvdarklord!

Το site σου μου εβαλε τα γυαλια. Εκτος απο το οτι ειχα καποια πολυ ηλιθια τυπογραφικα, το βασικο ηταν οτι ειχα ξεχασει να κλεισω το <img> tag! Για καποιο μυστηριο λογω στον firefox το παρεκαμψε αλλα ο IE το πηρε "στραβα"...

Η rockwell καθε αλλο παρα κλασικη θα την ελεγα (στην τυχη την επελεξα λογω εμφανισης), αλλα οκ εμφανιζεται κανονικα τωρα πλεον!

Επίσης καλό είναι να γράφεις κώδικα όχι από το notepad αλλά από κάποιο εξειδικευμένο περιβάλλον. Αν το έκανες αυτό θα σου χτυπούσε αμέσως λάθος αν ξεχνούσες να κλείσεις κάποιο tag

thanocaster · 13 Δεκεμβρίου 2010

Γενικά, οι γραμματοσειρές που υποστηρίζονται άμεσα και εγγενώς σε όλους τους browsers (web safe fonts) είναι ελάχιστες. Από εκεί και πέρα, αν θέλεις να χρησιμοποιήσεις κάποια άλλη, και να φαίνεται σωστά σε όλους τους χρήστες, υπάρχουν κάποιες τεχνικές που χρησιμοποιούνται. Φυσικά, θα πρέπει να χρησιμοποιήσεις μόνο γραμματοσειρές που είναι δωρεάν και αφήνουν το δικαίωμα αναδιανομής στην σχετική άδειά τους.

Αν πρόκειται για πολύ μικρά κομμάτια κειμένου (πχ κάποια λεζάντα μόνο, ή κάποιος υπότιτλος), μπορείς να μετατρέψεις το κείμενο σε εικόνα.
Web font embedding services. Είναι κάτι σαν plugins που αναλαμβάνουν να μετατρέπουν το κείμενό σου σε εικόνες ή flash.
CSS font embedding property. Το ίδιο το CSS σου δίνει τη δυνατότητα να ανεβάσεις το αρχείο της γραμματοσειράς που θέλεις να χρησιμοποιήσεις (ή ακόμα και να λινκάρεις το αρχείο από άλλη σελίδα απευθείας). Εδώ, βέβαια, ξεκινάει και η τεράστια κουβέντα περί πνευματικής ιδιοκτησίας στην οποία προσωπικά δεν θα αναλωθώ.

Σε γενικές γραμμές, εγώ έχω επιλέξει την πιο safe λύση, δηλαδή επιλογή από την περιορισμένη λίστα που μου επιτρέπει να είμαι πάντα συμβατός, και για μερικές προτασούλες ή λέξεις να χρησιμοποιώ εικόνες (πάντα με alt κείμενο).

orotoi · 13 Δεκεμβρίου 2010

εγω στη τελευταία μου δουλειά έπαιξα επιτέλους με web fonts.. Σκεφτόμουν να φτιάξω και ενα wiki topic σχετικά, αλλα υπάρχουν τόσες πολλές πληροφορίες εκει έξω που δε νομίζω οτι χρειάζεται τελικά.

thanocaster · 13 Δεκεμβρίου 2010

Ποιο χρησιμοποίησες; Εντυπώσεις;

PhlegethoN · 13 Δεκεμβρίου 2010

To course που ακολουθησα προτεινε το Notepad++ ως βασικo editor που παρεχει το βασικο format και ετσι ειπα να αρχισω με αυτο. Καποια στιγμη θελω να δοκιμασω και το Dreamweaver ως μια πιο ολοκληρωμενη σουϊτα, τουλαχιστον για οταν θα εχω σκοπο να φτιαξω κατι πιο σοβαρο.

Η λιστα με τις web safe fonts πραγματικα ειναι πολυ περιορισμενη και η μετρατροπη σε image ειναι εφικτη σε ελαχιστες περιπτωσεις (και γενικα προσωπικα δεν μ'αρεσει οταν την συναντω σε σελιδες). Μου κανει εντυπωση παντως τωρα που αρχιζω να μπαινω στα πραγματα οτι υπαρχει τετοιου βαθμου περιορισμος και για το copyright πιστευα ηταν πιο ελαστικα τα πραγματα...

thanocaster · 13 Δεκεμβρίου 2010

To course που ακολουθησα προτεινε το Notepad++ ως βασικα editor που παρεχει το βασικο format και ετσι ειπα να αρχισω με αυτο. Καποια στιγμη θελω να δοκιμασω και το Dreamweaver ως μια πιο ολοκληρωμενη σουϊτα, τουλαχιστον για οταν θα εχω σκοπο να φτιαξω κατι πιο σοβαρο.

Η λιστα με τις web safe fonts πραγματικα ειναι πολυ περιορισμενη και η μετρατροπη σε image ειναι εφικτη σε ελαχιστες περιπτωσεις (και γενικα προσωπικα δεν μ'αρεσει οταν την συναντω σε σελιδες). Μου κανει εντυπωση παντως τωρα που αρχιζω να μπαινω στα πραγματα οτι υπαρχει τετοιου βαθμου περιορισμος και για το copyright πιστευα ηταν πιο ελαστικα τα πραγματα...

Σχετικά με τον editor, θα σου πρότεινα να αποφύγεις το Dw και να κοιτάξεις το Aptana (free και modular, ώστε αν αποφασίσεις μεθαύριο να γράψεις άλλη γλώσσα, να χρησιμοποιήσεις το ίδιο IDE). Όσον αφορά στις γραμματοσειρές, η μετατροπή σε εικόνες δεν είναι για πολύ κείμενο, αλλά για κάνα τίτλο κάτω από το main image πχ.

orotoi · 14 Δεκεμβρίου 2010

Ποιο χρησιμοποίησες; Εντυπώσεις;

ποιο font εννοείς? Βασικά ψιλο παρανομώ (τι ψιλό... ας ελπίσουμε να μη περάσει κανας Jobs απο τα μέρη μου :Ρ) Είναι σχετικά προσωρινή η λύση μέχρι να βρούμε ενα free, αλλα το χω αμελήσει λίγο γιατι παιδεύομαι με μια mailing list αυτό το καιρό.

Πάντως για free to use fonts.. εδώ έχει κάμποσο υλικό http://www.fontsquirrel.com/

thanocaster · 14 Δεκεμβρίου 2010

Ποιο service εννοούσα, αλλά απ' ότι κατάλαβα εσύ εννοούσες το css embedding...

orotoi · 14 Δεκεμβρίου 2010

yeap.. css only

Απο τη στιγμή που πλέον υποστηρίζεται απ όλους τους σοβαρούς και μη (βλέπε ie) browsers.. Γενικά πάει καλά το θέμα αυτό επιτέλους. Ο εξπλόρερ βέβαια θέλει πάλι τη δική του ειδική μεταχείριση.. αλλα οκ.

jms · 14 Δεκεμβρίου 2010

>
@font-face {  font-family: "SuperSweetFont";  
src: url(http://www.yourdomain.com/fonts/sweet/supersweetfont.ttf) format("truetype");

δηλαδή, κάνεις αυτό που είναι παραπάνω σε έναν σύνδεσμο και είσαι κομπλέ?

//χμμ σύμφωνα με αυτό ναι...

//ενδιαφέρον, ίσως...

Σύνδεση

XHTML, CSS form

Προτεινόμενες αναρτήσεις

PhlegethoN

bnvdarklord

PhlegethoN

bnvdarklord

PhlegethoN

digimyth

thanocaster

orotoi

thanocaster

PhlegethoN

thanocaster

orotoi

thanocaster

orotoi

jms

Αρχειοθετημένο

Σύνδεση