Είσοδος σελίδες είναι ένα φυσιολογικό μέρος του Web . Σε αυτό το σεμινάριο , θα μάθετε πώς να δημιουργήσετε τις ετικέτες HTML απαραίτητο να δημιουργηθεί το πλαίσιο το username , το πλαίσιο εισαγωγής κωδικού πρόσβασης , και το κουμπί υποβολής . Θα σας δείξει επίσης πώς να οργανώσετε τη φόρμα HTML σας με την τοποθέτηση του σε ένα τραπέζι που είναι δύο στήλες πλάτος τρεις σειρές ψηλά . Τα πράγματα που θα χρειαστείτε
επεξεργαστή κειμένου , όπως Πηγή Edit
λογισμικό φόρτωμα του εγγράφου , όπως FileZilla
χώρο Server που υποστηρίζει « server-side " εφαρμογές , όπως log -in χαρακτηριστικά .
Η Εμφάνιση περισσότερες οδηγίες
έγγραφο βήματα
Η 1
Δημιουργήστε το HTML DocumentAll HTML έγγραφα θα πρέπει , προκειμένου να είναι συμβατές οι ακόλουθες ετικέτες : • < 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 " xml : lang = " el " lang = " el " > • Η
αρχίζει tag • Οι
< /title> tags & # x2022 ? το < /head> ετικέτα τέλους • Η <body> αρχίζει ετικέτα και το < /body> ετικέτα τέλους • και τέλος , το < /html > τέλος tag.Make βεβαιωθείτε ότι πληκτρολογείτε το ακόλουθα ανάμεσα στην ετικέτα αρχής <title> και τελειώνει < /title> tag : • μου Σύνδεση PageSave το αρχείο ως login.html και ανεβάστε το στο διακομιστή Web σας . Θα πρέπει να δείτε μια κενή λευκή σελίδα και κατά μήκος της κορυφής μπλε άκρη του browser θα πρέπει να διαβάσει , " Είσοδος Σελίδα μου » . EXPLANATIONThe doctype δηλώνει ότι χρησιμοποιείτε XHTML , το νέο πρότυπο του World Wide Web , όπως δηλώνεται από τον W3Schools , οι συντάκτες της HTML.The <html> tag έχει πολλά χαρακτηριστικά μέσα στην ετικέτα , η πρώτη από τις οποίες είναι xmlns , που σημαίνει Εκτεταμένες Markup Language Όνομα χώρου , η οποία καθορίζει τους κανόνες δόμησης είστε following.The <head> < /head> περιέχει όλες τις πληροφορίες σχετικά με το έγγραφο , στην περίπτωση αυτή , η <title> < /title> που εμφανίζεται στην κορυφή μπλε λωρίδα στο επάνω μέρος της ετικέτας σας στο διαδίκτυο browser.The <body> περιέχει όλες τις πληροφορίες στη σελίδα ότι ο τελικός χρήστης θα see.Finally , το < /html > ετικέτα τέλους ολοκληρώνει τη σελίδα HTML . 2 <br> <p> το έντυπο TagsNow που έχετε δημιουργήσει το έγγραφο HTML , θα πρέπει να δημιουργήσει η φόρμα login itself.Type τα ακόλουθα μετά την ετικέτα έναρξη <body> και πριν από τη λήξη < /body> tag : <form action="#"> < /form> EXPLANATIONThe ετικέτα μορφή δηλώνει στο πρόγραμμα περιήγησης ότι οι ετικέτες ανάμεσα στην ετικέτα αρχής <form> και την κατάληξη </form > ετικέτα θα συλλέγει κάποιο είδος της εισόδου του χρήστη , είτε πρόκειται για ένα κουτάκι , ή ένα πλαίσιο κειμένου , ή ένα κουμπί , ή κάποιο άλλο είδος της διαδραστικής στοιχείου . <br> εικόνων 3 <p> Συμπληρώστε την FormType τα ακόλουθα μετά την έναρξη <form action="#"> ετικέτα και πριν από την λήξη < /form> tags : <b> Όνομα Χρήστη : < /b> <input type="text" name="username" size="40" /> <br /> <b> Κωδικός : < /b> < input type = "text "name = " password " size = " 40 " /> <br /> <input type="submit" value="Login" name="submit" /> Αποθηκεύστε το αρχείο και ανεβάστε το στο Web σας διακομιστή. Όταν προβάλλετε τη σελίδα , θα πρέπει να δείτε μια φόρμα σύνδεσης , όπως φαίνεται στα picture.EXPLANATIONThe </b > tags ονομάζονται τολμηρή ετικέτες . Θα αλλάξετε το στυλ είδος του κειμένου μεταξύ τους ώστε να bold.The <input type="text" name="username" size="40" /> ετικέτα δημιουργεί ένα πλαίσιο κειμένου ( που υποδεικνύεται από τον τύπο χαρακτηριστικό = "text " ) ότι είναι 40 χαρακτήρες ( υποδεικνύεται από το μέγεθος = " 40 " χαρακτηριστικό) και ονομάζεται "username" ( υποδεικνύεται από το όνομα = "username" χαρακτηριστικό ) . Το όνομα είναι σημαντικό για το πότε θα επεξεργάζεται τα περιεχόμενα της φόρμας , η οποία δεν καλύπτεται από την παρούσα tutorial.The <br /> ετικέτα δημιουργεί μια αλλαγή γραμμής , ακριβώς όπως αν είχε μπει "Return" ή " Enter" σε ένα κείμενο έγγραφο.Ο δεύτερη ετικέτα εισόδου , που ονομάζεται "password ", φαίνεται ίδιο με το " όνομα " πεδίο , με την εξαίρεση ότι έχει μια διαφορετική τιμή για το " όνομα " attribute.The τελική ετικέτα < input type = " υποβάλει " value = "Σύνδεση" name = " υποβάλει " /> , δημιουργεί ένα κουμπί εισόδου που ο χρήστης θα κάνει κλικ για να υποβάλουν στοιχεία για το λογισμικό μορφή επεξεργασίας . ο «τύπος εισόδου " χαρακτηριστικό δημιουργεί το κουμπί , η "τιμή " χαρακτηριστικό γράφει το κείμενο του κουμπιού , και το " όνομα " χαρακτηριστικό προσδιορίζει το κουμπί για το λογισμικό μορφή επεξεργασίας . <br> Η 4 <p> Δημιουργήστε το TableType το <table> αρχίζουν ετικέτα μετά την < ενέργεια φόρμας = " # " > αρχίζει ετικέτα . Hit " enter " γι 'αυτό είναι στη δική της γραμμή . Πατήστε το " ξανά το πλήκτρο enter " και πληκτρολογήστε το <tr> αρχίζει tag.Type το <td> αρχίζει ετικέτα μπροστά από το < b> Username : . < /b> Πληκτρολογήστε την ακολουθία < /td > ετικέτα τέλους μετά το < /b> ετικέτα τέλους που ακολουθεί Username : . Η νέα γραμμή θα μοιάζει με αυτό : <td> <b> Όνομα χρήστη : < /b> < /td > Πληκτρολογήστε το <td> αρχίζει ετικέτα μπροστά από το <input type="text" name="username" size="40" /> ετικέτα , και το < . ;/td > ετικέτα στο τέλος Διαγραφή του <br /> tag.The νέα γραμμή θα μοιάζει με αυτό : <td> < input type = "text " name = "username" size = " 40 " /> < /td > Πατήστε το πλήκτρο enter και πληκτρολογήστε το < /tr > τέλος tag.Type την ετικέτα αρχή <tr> και χτύπησε enter.Surround την επόμενη γραμμή , όπως κάνατε πριν με τα ζεύγη των <td> < /td> , όπως φαίνεται παρακάτω , φροντίζοντας να διαγράψετε την ετικέτα /> <br : <tr> <td> <b> Κωδικός : < /b> < /td > <td> ? <input type="text" name="password" size="40" /> < /td > < /tr > Πατήστε το πλήκτρο enter και πληκτρολογήστε ένα νέο <tr> αρχίζει tag πληκτρολογήστε την ακόλουθη . αρχίζουν <td> ετικέτα με την ακόλουθη ιδιότητα πριν από την <input type="submit" value="Login" name="submit" /> tag : <td colspan="2"> Πληκτρολογήστε το < /td > ετικέτα τέλους μετά την <input type="submit" value="Login" name="submit" /> tag . Πατήστε enter και πληκτρολογήστε το < /tr > ετικέτα τέλους Hit . αρχίζει ξανά και πληκτρολογήστε το < /table> ετικέτα , όπως φαίνεται στον πίνακα diagram.EXPLANATIONAn HTML είναι ένας πολύ εύκολος τρόπος για να δομήσει μια φόρμα . για να δημιουργήσετε έναν πίνακα , θα πρέπει πρώτα τα <table> < /table> tags . Εντός του <table> < /table> ετικέτες είναι <tr> < /tr > ή ετικέτες πίνακα γραμμή , που δημιουργούν τις γραμμές του πίνακα , και <td> < /td > ετικέτες πίνακα δεδομένων , που δημιουργούν τα μεμονωμένα κύτταρα του πίνακα . Οι στήλες του πίνακα καθορίζεται από τον αριθμό των <td> < /td > ετικέτες που βρίσκονται ανάμεσα σε κάθε <tr> < /tr > tag . κάθε γραμμή απαιτεί τουλάχιστον 1 σετ <td> < /td > tags.In η τελευταία <td> αρχίζει tag βάζουμε ένα χαρακτηριστικό στην ετικέτα , η οποία δίνει το tag μια ειδική οδηγία . στην περίπτωση αυτή , η πλάτοςστήλης χαρακτηριστικό αναφέρει ότι το κύτταρο , που δημιουργήθηκε από την <td> ? . . < /td > tag είναι να καταλαμβάνουν 2 στήλες , επειδή το ίσο με το 2 που <br> 5 <p> Αποθηκεύστε και να ανεβάσετε το αρχείο σας θα πρέπει να έχετε παρατηρήσει μια μικρή αλλαγή στο ότι τα πλαίσια κειμένου πρέπει να είναι απόλυτα ευθυγραμμισμένες μεταξύ τους , όπως φαίνεται στην εικόνα . <br> Η <br> εικόνων
<div class="grad2"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3314932315682382" crossorigin="anonymous"></script> <!-- 221021-2 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3314932315682382" data-ad-slot="8094203668" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div>
<div class="grad3"></div>
</div>
<div class="fanyedads">
<ul>
<li>Τελευταίο άρθρο: <a class='LinkPrevArticle' href='http://www.221021.com/Programming/computer-programming-languages/88803.html' >Πώς να αλλάξετε το σύνολο πεδίων Χρώμα </a>
<li>Επόμενο άρθρο: <a class='LinkNextArticle' href='http://www.221021.com/Programming/computer-programming-languages/88805.html' >Πώς να διορθώσετε ένα σφάλμα Σύνταξη </a>
</ul>
</div>
</div>
<div class="woqinimaderwr24">
<div class="dibud23">
<div class="biaotidas51">
<div class="biaotidas511"><h3>Συναφής σύστασή</h3></div>
<div class="butudasda"></div>
</div>
</div>
<div class="dibud24">
<div class="dibud241">
<ul class="dsa31das">
<li><a href="http://www.221021.com/Programming/computer-programming-languages/88216.html" target="_blank">Πώς να κάνω μια Bot MSN </a></li>
<li><a href="http://www.221021.com/Programming/computer-programming-languages/88830.html" target="_blank">Πώς να κάνει ένα ψηφιακό ρολόι </a></li>
<li><a href="http://www.221021.com/Programming/computer-programming-languages/86824.html" target="_blank">Οι τρεις θεμελιώδεις αρχές της Αντικειμενοστρεφής Προγραμματισμός </a></li>
<li><a href="http://www.221021.com/Programming/computer-programming-languages/88429.html" target="_blank">Πώς να δημιουργήσετε προσαρμοσμένες λειτουργίες σε Filemaker </a></li>
<li><a href="http://www.221021.com/Programming/computer-programming-languages/314680.html" target="_blank">Τι είναι ο διερμηνέας εντολών; </a></li>
</ul>
</div>
<div class="dibud242">
<div class="biaotidasoidasf3h4">
<h4>Τελευταία άρθρα</h4>
<div class="nibushihenzaiyi"></div>
</div>
<ul class="thydghaodennrend">
<li><a href="http://www.221021.com/Programming/computer-programming-languages/86402.html" target="_blank">Εφαρμογή στο Matlab του μέθοδο Monte Carlo </a></li>
<li><a href="http://www.221021.com/Programming/computer-programming-languages/86913.html" target="_blank">Πώς να μειώσετε MPI </a></li>
<li><a href="http://www.221021.com/Programming/computer-programming-languages/86361.html" target="_blank">Οι βέλτιστες πρακτικές για τις παρτίδες των μαθηματικών υπολογισμών με ColdFusion </a></li>
<li><a href="http://www.221021.com/Programming/computer-programming-languages/88048.html" target="_blank">Πώς να υπολογίσετε μια ενημέρωση Gridview Πεδίο </a></li>
</ul>
</div>
</div>
</div>
<div class="dibudaohnagdsaw">
<div class="das342sd"><p>Πνευματικά δικαιώματα © <a href="http://www.221021.com/" target="_blank" >Γνώση Υπολογιστών</a> Όλα τα δικαιώματα κατοχυρωμένα </p></div>
</div>
</div>
</body>
</html>