Hvordan lage en nettside med en utfyllbare skjema

August 23

Opprette en webside som inneholder et HTML-skjema er en felles oppgave, og en grei en å oppnå. Det er mange mulige elementer du kan inkludere i en webside skjema, og hvilke du velger vil selvsagt forholde seg til formålet i å skape form. Den informasjonen du ønsker å fange opp, trinnene involvert er generelt like. Når du oppretter skjemaet, vil du også må vurdere hva som skal skje med de data som samles inn i den.

Bruksanvisning

1 Lag din webside ved hjelp av følgende ytre struktur:

<Html>

<Body>

Form innhold å gå her ...

</ Div>

</ Body>

</ Html>

Ta med eventuelle andre elementer på siden din som overskrifter, bilder og tekst som du trenger. Skjemaet vil bli plassert innenfor "<div>" på siden kroppen, så hvis du legger noe annet, gjør det utenfor dette elementet.

2 Legg inn et skjema disposisjonen som følger (innenfor det angitte "<div>" -delen):

Input elementer for å gå her ...

</ Form>

Avhengig av hva du planlegger å gjøre med data folk inn i skjemaet, kan du sende det til en server side script som i dette eksempelet. I dette tilfelle kan data sendes til en prosedyre kalt "myform_handler.php" som kan utføre behandlingen slik som å legge inn data til en database eller kanskje å sende en e-post med dataene inkludert.

3 Inkluder inngangs elementer i skjemaet som passer hvilke typer data du vil ta bilde av. Følgende er eksempler på noen av de typer HTML innspill element du kan velge mellom:

<! - Radio Knapper ->

Radio Button 1: <input type = "radio" name = "radiogroup" value = "en" />

Radio Button 2: <input type = "radio" name = "radiogroup" value = "to" />

<! - Markerings ->

Checkbox 1: <input type = "checkbox" name = "Check1" value = "ischecked" />

<! - Drop ned ->

</ Velge>

<! - Tekstskriving ->

<textarea rows = "20" kolonner = "10" name = "textentry"> Standard tekst vises her. </ textarea>

4 Inkluder en send-knappen i skjemaet slik at eventuelle angitte data kan fanges:

Når brukeren trykker på send-knappen, hva skjer vil avhenge av hva du inkludert i åpnings "<form>" tag. Hvis, som i dette eksempelet, inkludert deg navnet på en server side script innenfor skjemaets "action" attributt, trykker på send-knappen vil alle data som er lagt inn i skjemaet for å bli sendt dit. Alternativt kan du velge å forbli på samme side når skjemaet er sendt, men kaller en Javascript-funksjonen til å gjøre hva du vil med dataene.

5 Behandle dataene tatt fra skjemaet. Hvis du sender skjemadataene til en server side script, kan du få tilgang til det som ble skrevet inn der, som i følgende PHP eksempel ( "myform_handler.php" lagret i samme katalog som Web-side):

<? 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......;

Dette trivielt eksempel bare skriver de fangede detaljer ut til leseren, men det kan være lurt å håndtere dataene på en annen måte, for eksempel å skrive det til en database eller e-post den et sted. Last opp filene dine når de er ferdige og teste formen ved å bla til det.

Hint

Det kan være lurt å validere inn data før skjemaet kan sendes inn på riktig måte. Det finnes mange gratis Javascript-ressurser tilgjengelig, for eksempel for å teste for gyldige e-postadresser og nesten alle andre typer data.
Sørg for at du teste formen ved å skrive inn data og sende den i forskjellige nettlesere, som noen ganger disse elementene ser og oppfører seg annerledes.