Hvordan lage en avkrysningsboks Må på en e-post skjema

Hvis websiden inneholder en e-skjema, kan du ønsker å hindre brukere fra å sende den før de utfører visse oppgaver. En felles oppgave er å sjekke en avkrysningsboks. Du har sikkert sett nettsteder som krever at du godtar noen betingelser ved å krysse en sjekkheftet. Inntil du gjør det, kan du ikke sender inn skjemaet. HTML alene ikke kan fortelle om et merke som finnes inne i en avkrysnings. Du må bruke et skriptspråk for å utføre denne oppgaven. Ved å legge en "onsubmit" hendelse til din e-skjema, kan du forhindre innsending av skjemaer til brukere sjekke boksen.

Bruksanvisning

1 Start en HTML-editor og åpne en web-dokument som har en e-post form. Finn formen HTML-kode. Det vil trolig ligne koden vist nedenfor:

<Form name = "emailForm" action = "processForm.php"

method = "post">

Navn: <input type = "text" name = "name">

E-postadresse: <input type = "text" name = "emailAddress">

<Input type = "submit" value = "Send e-post">

</ Form>

Åpningen "<form" tag, vist på linje 1, definerer form. Den avsluttende "</ form>" tag ender form erklæringen. Lim inn følgende tekst etter den avsluttende "</ form>" tag:

<Input id = "Checkbox1" type = "checkbox" />

Dette legger en avmerkingsboks hvis ID er "Checkbox1."

2 Endre åpningen "<form" tag ved å legge til følgende tekst i slutten av denne tag erklæring:

onsubmit = "return validateForm ( 'Checkbox1')"

Denne "onsubmit" attributtet forteller nettlesere for å ringe Javascript-funksjon som heter "validateForm" før du sender inn skjemaet. Dette attributtet passerer ID-en til boksen du ønsker å bekrefte. Etter å føye til denne teksten i skjemaet åpnings "<form" tag, kan den koden koden se slik ut:

<Form name = "emailForm" action = "processForm.php"

method = "post" onsubmit = "return validateForm ( 'Checkbox1')">

3 Legg til dette "validateForm" -funksjonen til dokumentets "script" -delen:

funksjon validateForm (checkboxID) {

Var boksen = document.getElementById (checkboxID);

if (checkbox.checked == false) {

alert ( "Vennligst sjekk boksen");

return false;

}

ellers

return true;

}

Denne funksjonen, kalt av skjemaets "onsubmit" hendelse, undersøker boksen er "merket" tilstand. Hvis den oppdager at sjekken staten er falsk, vises det en feilmelding og ber brukeren om å plassere en sjekk i boksen. Ellers returnerer funksjonen verdien "true" til skjemaet.

4 Lagre dokumentet, og åpne den i en nettleser. Klikk på skjemaets send-knappen uten å plassere en hake i boksen. Validerings funksjon går og viser "Please plassere en sjekk i boksen" -melding.

5 Klikk i avmerkingsboksen for å legge til et merke i boksen, og klikk på knappen igjen. Siden sender e-posten din form.

Hint

• Vær oppmerksom på at ID-verdien du sender til "validateForm" -funksjonen må være den samme som ID av boksen du ønsker å bekrefte. Funksjonen må som ID for å undersøke sin sjekket tilstand.