Come modificare modulo Valore Campo con JavaScript

April 22

Come modificare modulo Valore Campo con JavaScript


JavaScript è un linguaggio di scripting lato client che fornisce una serie di funzioni che permettono ai programmatori di modificare dinamicamente quasi ogni aspetto dell'interfaccia utente di una pagina web. Molte pagine web richiedono che i visitatori moduli web completi, in genere con lo scopo di recuperare e memorizzare le informazioni. JavaScript è spesso usato per aiutare gli utenti a forme uso completa pre-popolamento valori forma comune, convalidando i dati del modulo per garantire la corretta formattazione e valori, e nascondendo e mostrando i campi del modulo e il contenuto.

istruzione

1 Aprire un editor di testo e creare un nuovo file chiamato fillForm.html. Aggiungere alcuni tag HTML per il file che includono un tag aperto "<html>", un "<head>" tag aperto, una chiusura "</ head>" tag, un open "<body>" tag, una chiusura "< / body> "tag, e una chiusura" </ html> tag ". Insieme, questi tag implementano una pagina HTML di base.

<Html>

<Head> </ head>

<Body> </ body>

</ Html>

2 Aggiungere un tag "<script>" tra il "<head>" e "</ head>" tag e impostare il tipo di script per "text / javascript".

<Html>

<Head>

<Script type = "text / javascript">

</ Script>

</ Head>

<Body> </ body>

</ Html>

3 Aggiungere una funzione JavaScript tra i tag "</ script>" "<script>" e. Nome della funzione fillForm () e comprendono una parentesi graffa aperta "{" e una stretta parentesi graffa "}" per indicare dove posizionare il codice della funzione.

<Html>

<Head>

<Script type = "text / javascript">

Funzione fillForm ()

{

}

</ Script>

</ Head>

<Body> </ body>

</ Html>

4 Modificare la funzione fillForm () e utilizzare una funzione getElementById JavaScript per impostare il valore del campo di input con il valore id "formToFill" al testo "Modificato valore".

<Html>

<Head>

<Script type = "text / javascript">

Funzione fillForm ()

{

. Document.getElementById ( "formToFill") value = "valore modificato";

}

</ Script>

</ Head>

<Body> </ body>

</ Html>

5 Digitare un "<form>" tag aperto tra il "<body>" e "</ body>" tag HTML. Aggiungere un "<input>" tag HTML per la forma e dargli un id "formToFill" e un valore "valore originale". Chiudere il tag "</ form>" e salvare fillForm.html.

<Html>

<Head>

<Script type = "text / javascript">

Funzione fillForm ()

{

. Document.getElementById ( "formToFill") value = "valore modificato";

}

</ Script>

</ Head>

<Body>

<Form>

<Input id = valore "formToFill" = "valore originale">

</ Form>

</ Body>

</ Html>

6 Aggiungere un "<tasto>" tag HTML per il file e aggiungere un evento onClick () al pulsante che chiama la funzione fillForm (). Impostare il testo del pulsante "Clicca per modificare il valore nel campo di immissione formToFill.". Chiudere il "<button />" tag e salvare e chiudere fillForm.html.

<Html>

<Head>

<Script type = "text / javascript">

Funzione fillForm ()

{

. Document.getElementById ( "formToFill") value = "valore modificato";

}

</ Script>

</ Head>

<Body>

<Form>

<Input id = valore "formToFill" = "valore originale">

<Tipo di pulsante = "button" onclick = "fillForm ()"> Fare clic per modificare il valore nel campo di immissione formToFill. </ Button>

</ Form>

</ Body>

</ Html>

7 Aprire il file in un browser Web e fare clic sul pulsante per modificare il testo nel campo modulo dal testo "valore originale" a "valore modificato".

Consigli e avvertenze

  • Utilizzare <label> tag in moduli web per garantire campi chiaramente identificabili.
  • Aggiunta di testo a campi è un modo utile per aiutare gli utenti campi del modulo completo. L'evento onfocus () può essere usato per eliminare il testo quando l'utente inizia a digitare informazioni effettive nel campo.
  • La maggior parte dei moduli web sono utilizzati per raccogliere i dati degli utenti e memorizzare tali dati per un futuro scopo. Ci sono molte opzioni di database disponibili che possono lavorare con gli script lato server, come MySQL, Oracle e SQL Server.
  • Dinamicamente la modifica dei valori in forme possono sorprendere gli utenti. Assicurarsi di messaggio all'utente in modo appropriato per evitare confusione e frustrazione.