Come creare una pagina web con un modulo compilabili

July 17

Come creare una pagina web con un modulo compilabili


La creazione di una pagina Web contenente un modulo HTML è un compito comune e una semplice da realizzare. Ci sono molti elementi possibili che è possibile includere all'interno di un modulo pagina Web, e quali si sceglie naturalmente riguardare il vostro scopo nella creazione del modulo. Qualsiasi informazione che si desidera catturare, le fasi sono generalmente simili. Quando si crea il modulo, si dovrà anche prendere in considerazione ciò che sta per accadere a dati acquisiti all'interno di esso.

istruzione

1 Crea la tua pagina Web utilizzando la seguente struttura di massima:

<Html>

<Head> </ head>

<Body>

<Div id = "formsection">

Formare i contenuti di andare qui ...

</ Div>

</ Body>

</ Html>

Includere altri elementi sulla pagina, come intestazioni, immagini e testo come desiderato. Il modulo sarà posizionato all'interno del "<div>" nel corpo della pagina, quindi se si sta aggiungendo qualsiasi altra cosa, farlo al di fuori di questo elemento.

2 Aggiungi il tuo profilo forma come segue (all'interno del designato "<div>" sezione):

<Form name = action = metodo "myform" "myform_handler.php" = "post">

elementi di input per andare qui ...

</ Form>

A seconda di quello che si pensa di fare con i dati di persone entrano nel modulo, si consiglia di sottoporlo a uno script lato server come in questo esempio. In questo caso i dati vengono inviati a uno script chiamato "myform_handler.php" che può svolgere l'elaborazione, come commettere i dati in un database o forse l'invio di una e-mail con i dati inclusi.

3 Includere elementi di input all'interno del vostro modulo per soddisfare i tipi di dati che si desidera catturare. I seguenti sono esempi di alcuni dei tipi di elementi di input HTML è possibile scegliere tra:

<! - Pulsanti di opzione ->

Radio Button 1: <input type = "radio" nome = valore "RadioGroup" = "uno" />

Radio Pulsante 2: <input type = "radio" nome = valore "RadioGroup" = "due" />

<! - Casella di controllo ->

Casella 1: <input type = "checkbox" nome = valore "check1" = "IsChecked" />

<! - Discesa ->

<Select name = "listselection">

<Option value = "item1"> Articolo 1 </ option>

<Option value = "item2"> Articolo 2 </ option>

<Option value = "item3"> Articolo 3 </ option>

</ Select>

<! - Inserimento testo ->

<textarea rows = "20" cols = "10" name = "textentry"> testo predefinito visualizzato qui. </ textarea>

4 Includere un pulsante di invio del modulo di modo che tutti i dati inseriti possono essere acquisiti:

<Input type = "submit" value = "Invia" />

Quando l'utente preme il pulsante di invio, che cosa accade dipenderà da quello che hai incluso nella tua apertura "<form>" tag. Se, come in questo esempio, è stato incluso il nome di uno script lato server all'interno dell'attributo "action" del modulo, premendo il pulsante di invio farà sì che tutti i dati inseriti nel modulo da inviare lì. In alternativa si può optare per rimanere sulla stessa pagina quando il modulo viene inviato, ma chiamare una funzione JavaScript per fare quello che vuoi con i dati.

5 Elaborare i dati acquisiti dal modulo. Se si inviano i dati del modulo a uno script lato server, è possibile accedere a ciò che è stato inserito lì, come nel seguente esempio PHP ( "myform_handler.php" salvato nella stessa directory della pagina Web):

<? Php

$ Radio_choice = $ _ POST [ 'RadioGroup'];

$ Check_choice = $ _ POST [ 'check1'];

$ Select_choice = $ _ POST [ 'listselection'];

$ Text_entered = $ _ POST [ 'textentry'];

echo $ radio_choice "<br/>" $ check_choice "<br/>" $ select_choice "<br/>" $ text_entered......;

?>

Questo esempio banale scrive semplicemente i dettagli catturati fuori al browser, ma può essere utile per gestire i dati in un altro modo, come ad esempio la scrittura a un database o e-mail da qualche parte. Carica i tuoi file, una volta che siano completi e testare il modulo per la navigazione ad esso.

Consigli e avvertenze

  • Si consiglia di convalidare i dati inseriti prima il modulo può essere presentato con successo. Ci sono molte risorse JavaScript libero disponibile, ad esempio per testare per gli indirizzi e-mail validi e praticamente qualsiasi altro tipo di dati.
  • Assicurati di testare il modulo per l'inserimento dei dati e la presentazione in diversi browser Web, come a volte questi elementi sembrano e si comportano in modo diverso.