Come configurare smartphone e PC. Portale informativo

Ingresso multilinea. Campo di testo multilinea

Per testi voluminosi, ad esempio per messaggi di posta, è conveniente utilizzare questo particolare elemento. È creato dai tag e ha i seguenti parametri:

nome- nome del campo,

col- larghezza del campo in caratteri,

righe- numero di righe di testo visibili sullo schermo,

avvolgere- modalità di trasferimento delle parole:

spento- non avviene alcun trasferimento,

virtuale- il trasferimento viene visualizzato, ma il server riceve una stringa indivisibile,

fisico- trasferimento sia sullo schermo che all'arrivo sul server.

Disabilitato- campo inattivo,

sola lettura- è consentita la sola lettura.



Risultato:

Elenchi a discesa

Gli elenchi possono essere a elemento singolo o a selezione multipla. Entrambi sono specificati utilizzando i tag , all'interno del quale si trovano gli elementi di valore, specificato dal tag Diamo un'occhiata ai parametri di questi tag:



Quanto tempo sei disposto a dedicare a questo:



Quali giorni della settimana sono adatti per le lezioni:

(selezionare con premuto tasto ctrl)

Risultato:

Ci sono anche dei tag<gruppo opt>... , permettendoti di raggruppare gli elementi dell'elenco secondo alcuni criteri. Ad esempio, per creare un catalogo di siti sotto forma di elenco, è più conveniente dividerlo in gruppi per interesse. Si prega di notare in questo caso i tag di chiusura devono essere specificati. Codice d'esempio:

Catalogo dei siti:

Risultato:

Iscrizioni

Tutti gli elementi del modulo possono essere associati alle rispettive etichette utilizzando l'elemento e il suo parametro for, il cui valore è il nome dell'elemento a cui associamo l'etichetta. Per esempio:

Risultato:

Condizione lavorativa

Secondo l'opzione, creare un modulo per l'immissione dei dati. La pagina dovrebbe contenere i seguenti elementi visivi:

1. titolo;

2. testo che spiega lo scopo del modulo;

3. modulo di inserimento dati, secondo l'opzione. Seleziona tu stesso le tipologie di elementi per l'inserimento dei dati (almeno 3 diversi);

4. scavare – “ INVIARE», « CHIARO»;

5. informazioni sul creatore della pagina – Nome e cognome, gruppo, e-mail.

Figura 1 – Visualizzazione approssimativa della pagina

Aggiungi un pulsante a ciascun campo del modulo Spiegazione", quando si clicca, si apre una finestra con informazioni esplicative e/o un'immagine, il pulsante " VICINO».

Quando si preme il pulsante " INVIARE", viene verificata la correttezza dei dati del modulo: tutti i campi sono compilati, campi numerici contenere valori validi, rimuove gli spazi iniziali e finali. Se i dati in uno o più campi non corrispondono, dovrebbe essere visualizzata una finestra in cui dovrebbero essere visualizzati il ​​nome e un breve testo che spiega i requisiti per i dati inseriti nel campo. Se i dati sono inseriti correttamente, i dati vengono inviati dopo la conferma nella finestra di dialogo. Inseriscine due sul modulo campi nascosti Con data odierna e l'ora, che vengono anche trasmessi al server. Forma approssimativa:

Figura 2 – Vista approssimativa del modulo di inserimento dati

Tabella 1 – Opzioni per i moduli di inserimento dati

Opzione Descrizione
Officina, zona, nome completo Volume di lavoro svolto
UDC, nome completo Autore, Nome, Quantità
Numero del treno, Nome, Luogo di partenza, Luogo di arrivo, Categoria
Organizzazione, nome completo, anno di nascita, Posto occupato
Paese, area, popolazione, continente, capitale
Marca auto, Numero, Colore, Anno di costruzione, Chilometraggio
Razza del cane, Soprannome, Padre, Madre, Data di nascita, Nome completo del proprietario
Tipo di verdura, Nome della varietà, Data di semina, Data di raccolta, Raccolta
Disciplina, Ambito delle lezioni, Ambito dei laboratori, Tipo di controllo, Gruppo
Data, Temperatura, Pressione, Nuvolosità, Direzione del vento
Nome, Azienda, Costo, Quantità, Data
Nome della band, Paese, Album, Data di uscita, Numero di vendita
Nome della vetta, Altitudine, Nazione, Anno di conquista, Numero di salite
Nome completo, Anno di nascita, Altezza, Peso, Gruppo sanguigno
Nome completo, Campo di attività, Anno di nascita, Nazione, Numero di pubblicazioni

Domande di controllo

1. Descrivi il tag da creare campo di testo. Fornisci la sua sintassi.

2. Descrivere un tag per creare un campo di testo per l'immissione di una password. Fornisci la sua sintassi.

3. Descrivi il tag per la creazione delle caselle di controllo. Fornisci la sua sintassi.

4. Descrivi il tag per la creazione dei pulsanti. Fornisci la sua sintassi.

5. Descrivere un tag per creare un campo di selezione file. Fornisci la sua sintassi.

6. Descrivere un tag per creare un campo di testo multilinea. Fornisci la sua sintassi.

7. Descrivi il tag per creare un elenco a discesa. Fornisci la sua sintassi.

Insegnante Stishenok E.O.

Farberov A.G.

Questo elemento del modulo è progettato per creare un'area in cui è possibile inserire più righe di testo. In un campo di testo di questo tipo è consentito inserire interruzioni di riga; vengono salvate durante l'invio dei dati al server.

Il campo di testo su più righe è indispensabile per aggiungere commenti ad articoli, scrivere post su forum, inserire e modificare post di blog e molti altri casi in cui una riga di testo chiaramente non è sufficiente.

La sintassi per creare un campo è la seguente.

Tra i tag È possibile inserire qualsiasi testo che verrà visualizzato all'interno del campo. Se non è presente testo, il campo sarà inizialmente vuoto.

Gli attributi validi sono elencati nella tabella. 1.

Tavolo 1. Attributi

Il risultato dell'esempio è mostrato in Fig. 1.

Riso. 1. Visualizzazione del campo di testo predefinita

Per

Il risultato di questo esempio è mostrato in Fig. 2. Tieni presente che tutti gli spazi e le interruzioni di riga all'interno vengono presi in considerazione

Tra i tag È possibile inserire qualsiasi testo che verrà visualizzato all'interno del campo. Se non è presente testo, il campo sarà inizialmente vuoto.

Gli attributi validi sono elencati nella tabella. 1.

La creazione di un campo di testo multilinea è mostrata nell'Esempio 1.

Nessuno di questi attributi è richiesto, quindi un semplice modulo di invio di testo assomiglia a questo (esempio 1).

Esempio 1: campo di testo

Campo di testo

Inserisci la tua recensione:

Il risultato dell'esempio è mostrato in Fig. 1.

Riso. 1. Visualizzazione del campo di testo predefinita

Quando si progetta un campo su più righe, vengono applicate le stesse proprietà di stile del testo su riga singola. Vale a dire, puoi modificare la larghezza (proprietà della larghezza), l'altezza (altezza), il bordo (bordo), il colore del testo e dello sfondo (rispettivamente colore e sfondo), ecc. Un esempio di creazione di un campo di testo con caratteristiche diverse è fornito nell'esempio 2.

Esempio 2. Progettazione del campo di testo

Campo di testo

Inserisci la tua recensione:

Il risultato di questo esempio è mostrato in Fig. 2.

Riso. 2. Modificare l'aspetto del campo di testo

Tutti i browser tranne Internet Explorer supportano il ridimensionamento per

Tra i tag È possibile inserire qualsiasi testo che verrà visualizzato all'interno del campo. Se non è presente testo, il campo sarà inizialmente vuoto.

Gli attributi validi sono elencati nella tabella. 1.

La creazione di un campo di testo multilinea è mostrata nell'Esempio 6.1.

Nessuno di questi attributi è richiesto, quindi forma semplice per inviare un testo assomiglia a questo (esempio 1).

Esempio 1: campo di testo

HTML5 IE Cr Op Sa Fx

Campo di testo

Inserisci la tua recensione:

Risultato di esempio Browser Chrome mostrato in Fig. 1.

Riso. 1. Visualizzazione del campo di testo predefinita

Inoltre, il campo può trovarsi in due stati: bloccato e di sola lettura. La specifica HTML5 non definisce l'aspetto del campo e del testo in questi stati, quindi i browser lo visualizzano in modo diverso (Figura 2).

musica lirica

Il testo all'interno di un campo bloccato non può essere selezionato e aggiunto e il contenuto di tale campo non viene inviato dal modulo al server. Il testo all'interno del campo di lettura può essere copiato, ma non può essere modificato. L'esempio 2 mostra come creare un campo di lettura.

Esempio 2: Campo di lettura

HTML5 IE Cr Op Sa Fx

Campo di lettura

Copia il testo qui sotto e incollalo nel campo di richiesta password.

Tieni presente che il campo di lettura non è diverso nell'aspetto da un normale campo di testo, ma l'utente non potrà aggiungervi nulla. Quindi usalo con attenzione per evitare di ingannare le persone.

I migliori articoli sull'argomento