Nwlapcug.com


Come fare una casella di accesso personalizzata in HTML

Come fare una casella di accesso personalizzata in HTML


Se si sta sviluppando un sito Web in cui gli utenti disporranno di account dove possono accedere in, è possibile creare un modulo Web per implementare il processo di login. Utilizzando gli elementi di input di testo, è possibile consentire agli utenti di inserire il loro username e password. Quando invia il modulo, è possibile inviare i dati acquisiti per uno script server-side. Questo script sul lato server sarà necessario gestire i dettagli della verifica delle informazioni utente, consentendo l'accesso a un account solo se il nome utente e la password siano corretti.

Istruzioni

1

Aggiungere un modulo HTML alla pagina. Il seguente codice di esempio crea il contorno di un elemento form:
< nome modulo = "loginForm" action="check_user.php" metodo = "post" >
<! - input elementi qui - >
< / form >

All'interno di questo modulo, è possibile aggiungere gli elementi di input per acquisire le informazioni di accesso utente. L'apertura tag form contiene il nome dello script sul lato server per elaborare i dati di login, quindi modificarlo per soddisfare il proprio script.

2

Aggiungere un elemento di input di testo per il nome utente. Inserire il markup seguente all'interno il vostro elemento di form:
Username: < input type = "testo" nome = "username" id = "username" / >

Questo farà sì che un campo di testo venga visualizzato all'interno della pagina. L'utente può digitare il suo nome utente in esso. Se si desidera personalizzare l'aspetto del campo di testo nome utente, è possibile identificare nel codice Cascading Style Sheets (CSS) utilizzando l'attributo ID.

3

Aggiungere un campo di input di testo per la password. Inserire il seguente codice dopo il campo username di testo, ancora all'interno del form HTML:
Password: < input type = "password", nome = "password" id = "password" / >

Questo markup crea un campo di testo che inizialmente verrà visualizzati lo stesso come l'elemento di nome utente. Tuttavia, l'impostazione dell'attributo di tipo di input su "password" indica al browser per nascondere il testo immesso dall'utente per una maggiore sicurezza.

4

Aggiungere un pulsante Invia al modulo. All'interno dell'elemento form, aggiungere il seguente codice:
< input type = "submit" value = "Login" id = "submitButton" / >

Questo codice crea un pulsante di invio all'interno del modulo. L'impostazione predefinita è per visualizzare il "submit" parola su un pulsante di invio..--quindi se volete qualcosa di diverso a comparire, è necessario impostare l'attributo value. Quando l'utente preme questo pulsante, il browser invierà il testo immesso in entrambi i campi allo script sul lato server elencato come l'attributo di azione del form.

5

Implementare lo script sul lato server. Il contenuto dello script sul lato server che si utilizza per elaborare i dati di accesso dipenderà da come si memorizzano i dettagli utente sul server. Se si utilizza un database, è possibile controllare i dettagli immessi contro ciò che è memorizzato in là, assicurandosi che il nome utente e la password siano corretti. Nell'esempio di codice riportato di seguito illustra i dettagli di input all'interno di uno script PHP si ottiene:
<? php
$user = $ post ['username'];
$pass = $ post ['password'];
? >

Una volta che lo script ha questi dettagli, è possibile eseguire query origine dati per controllarle, quindi consentire all'utente l'accesso alla sua pagina di account se appropriato.

Consigli & Avvertenze

  • Per una maggiore sicurezza, è possibile crittografare i dati utente prima di inviare o elaborarli.
  • Se il tuo sito Web contiene informazioni riservate, potrebbe essere necessario implementare misure di sicurezza sostanziale durante tutte le sue pagine.