Hvordan lage en knapp med ett passord i HTML

April 30

Hypertext Markup Language kan lage skjemaer for å innhente brukerundersøkelser. Du kan lage et skjema som hindrer en bruker fra å fortsette til en annen side, eller fra å komme inn en kommentar eller andre data, med mindre riktig passord legges inn i passordfeltet. For å gjøre en passordbeskyttet form, legge inn en knapp og passordfelt på siden, og deretter legge til Javascript-kode til HTML for å hindre besøkende fra å sende inn skjemaet uten først å angi riktig legitimasjon.

Bruksanvisning

1 Legg Javascript i mellom "<head>" og "<head>" koder for å deaktivere brukeren fra å sende inn skjemaet med mindre riktig passord er tastet inn. Du kan bruke følgende kode:

<Head>
<Script type = "text / javascript">
fungere wrongPass ()
{
if (document.form.pass.value! = "password")
{
alert ( "Vennligst oppgi riktig passord for å fortsette.");
return false;
}
}
</ Script>
</ Head>

2 Legg til "<form>" og "</ form>" koder til siden. Sett inn koder i mellom "<body>" og "</ body>".

3 Sett "Passord:" i mellom "<form>" koder, og deretter legge et passordfelt i HTML. Koden skal så langt ligne på følgende:

<Body>
<Form>
Passord: <input type = "password" name = "pass">
</ Form>
</ Body>

4 Sett "<-knappen>" tag i mellom "<form>" tags og etter "<input>" tag, som så:

<Form>
Passord: <input type = "password" name = "password">
<-knappen Type = "submit" name = "submit"> Fortsett </ knapp>
</ Form>

5 Legg til "navn" attributt til "<form>" tag, med verdien av "form", deretter til "onsubmit" attributt. Sett Javascript-kode i mellom anførselstegn, for eksempel slik:

6 Erstatt "passord" i Javascript-kode med ønsket passord.

Hint

Denne artikkelen gir en grunnleggende mal som å arbeide, men du må legge til ekstra kode for å gjøre skjemaet arbeid. Hva kode for å legge an på hva du vil at skjemaet skal gjøre; for eksempel, hvis du ønsket at brukeren kan sende arbeids data, ville du trenger å legge til ekstra inngangs elementer til siden og endre form til å poste innsending til en side eller e-post. Les om skjemaer på W3C og W3Schools for mer informasjon.