Come configurare smartphone e PC. Portale informativo

Ingresso multilinea HTML. Casella di testo multilinea

Il campo di immissione del testo su più righe consente di inviare non una riga, ma più righe contemporaneamente. Per impostazione predefinita, il tag crea un campo vuoto largo 20 caratteri e composto da due righe.

Il campo di immissione del testo multilinea inizia con il tag abbinato ... Il tag name specifica il nome di un campo multilinea. È inoltre possibile specificare la larghezza del campo ( cols) e il numero di righe ( righe). Se necessario, è possibile specificare l'attributo di sola lettura, che vieta la modifica, l'eliminazione e la modifica del testo, ad es. il testo sarà di sola lettura. Se vuoi che il testo venga inizialmente visualizzato in un campo di immissione multilinea, allora deve essere posizionato tra i tag .

Casella di testo nascosta

Consente di trasferire allo script qualche tipo di informazione di servizio senza visualizzarla sulla pagina.

Il campo nascosto inizia con un tag i cui attributi sono nome, genere e valore. Attributo nome specifica il nome del campo, genere definisce il tipo del campo e l'attributo valore specifica il valore del campo.

Pulsante Invia

Serve per inviare un modulo a uno script.

Quando si crea un pulsante per l'invio di un modulo, è necessario specificare 2 attributi: tipo = "invia" e valore = "testo pulsante"... L'attributo del nome è obbligatorio se il pulsante non è uno, ma diversi e sono tutti creati per operazioni diverse, ad esempio i pulsanti "Salva", "Elimina", "Modifica", ecc. Dopo aver fatto clic sul pulsante, allo script viene passata la stringa nome = testo del pulsante.

Pulsante per scaricare file (sfoglia)

Serve per implementare il caricamento di file sul server. L'oggetto Sfoglia inizia con coppie di tag

... Etichetta per principianti
contiene l'attributo di crittografia richiesto. Attributo crittografare assume il significato multipart / form-data, che notifica al server che il file viene inviato insieme alle normali informazioni. Durante la creazione casella di testo devi anche specificare il tipo di file - " file”.




Caricare un file:

Cornice (set di campi)

Un oggetto fieldset consente di disegnare una cornice attorno agli oggetti. Ha un tag di chiusura ... Il titolo è indicato nei tag ... Lo scopo principale dell'oggetto è impostare diversi stili di aspetto.


Software (intestazione frame)
Il testo da inserire all'interno della cornice.

Elaborazione del modulo

Tutti i dati che vuoi ottenere dal modulo HTML in Script PHP gestito con array superglobali $ _POST o $ _GET, a seconda di quanto specificato nell'attributo metodo modalità di trasmissione dei dati.

Compito:È necessario ottenere i dati dalla casella di testo e dal campo di input multilinea e passarli allo script.
Soluzione:È necessario creare modulo HTML e PHP è uno script per elaborare il modulo.

Discussione:

Creiamo due file: form.html e action.php... nel file form.html conterrà il modulo html con la casella di testo miotesto e area di testo msg:





In questo modulo html, siamo interessati a 3 attributi: azione che specifica il percorso del gestore del modulo, il nome della casella di testo ( miotesto) e il nome del campo multilinea water ( msg). C'è anche un pulsante nel modulo, quando si fa clic su quale, i dati vengono trasferiti.

Dopo che il modulo html è pronto, dobbiamo creare un gestore di moduli action.php:

$ testo = $ _POST ["miotesto"];
$ msg = $ _POST ["miotesto"];
echo $ testo;
eco "";
echo $ msg;
?>

Dopo aver inserito eventuali valori nei campi di testo e fare clic su " Invia i dati"modulo html invia valori allo script action.php.
Dopodiché, nelle variabili $ testo e $ msg conterrà rispettivamente i valori del campo di testo e del campo di input multiriga, i cui valori sono presi dai superglobali $ _POST.

Se vuoi che la formattazione html sia rispettata in un campo di testo multilinea, usa la funzione nl2br():

$ testo = nl2br ($ _ POST ["miotesto"]);
?>

Compito: Supponiamo che tu debba creare un elenco a discesa con gli anni dal 2000 al 2050.
Soluzione:È necessario creare un modulo HTML con un elemento SELECT e PHP, uno script per l'elaborazione del modulo.

Discussione:

Per prima cosa creiamo due file: form.html e action.php... nel file form.html conterrà un modulo html con un elenco a discesa. Inoltre, i valori nell'elenco possono essere specificati in due modi:

I. Inserimento manuale dei dati:

II. Inserimento dati tramite loop:

Come puoi vedere, il secondo esempio con un ciclo è più compatto. Penso che non sia necessario portare lo script del gestore di questo modulo, perché viene elaborato allo stesso modo di un campo di testo, ad es. i valori dell'elenco possono essere recuperati dall'array superglobale $ _POST.

Descrizione:

Creiamo un modulo HTML per inviare un file al server.




Il dato modulo html contiene l'elemento navigare, che apre una finestra di dialogo per la scelta di un file da caricare sul server. Premendo il pulsante "Trasferisci file", il file viene passato allo script del gestore.

Quindi devi scrivere un gestore di script action.php... Prima di scrivere il gestore, devi decidere in quale directory copieremo il file:

if (isset ($ _ FILES ["miofile"])) // Se il file esiste
{
$ catalogo = "../immagine/"; // Il nostro catalogo
if (is_dir ($ catalog)) // Se esiste un tale catalogo
{
$ miofile = $ _FILES ["miofile"] ["tmp_name"]; // File temporaneo
$ miofile_name = $ _FILES ["miofile"] ["nome"]; // Nome del file
if (! copy ($ myfile, $ catalog)) echo "Errore durante la copia del file". $ myfile_name // Se la copia del file non è riuscita
}
else mkdir ("../ image /"); // Se non esiste tale directory, la creeremo
}
?>

Commento

Se ti fidi degli utenti per caricare qualsiasi file sul tuo server, devi essere estremamente attento. Gli aggressori possono inserire codice "cattivo" in un'immagine o in un file e inviarlo al server. In questi casi, è necessario controllare strettamente il download dei file.

Questo esempio mostra come creare una directory e copiare un file in quella directory sul server.

Vorrei anche dimostrare un esempio con l'elemento casella di controllo... Questo elemento è leggermente diverso dagli altri elementi in quanto se non uno degli elementi casella di controllo'A non è selezionato, quindi il superglobale è $ _POST sarà di ritorno valore vuoto:


Blu
Nero
bianco

if (! vuoto ($ _ POST ["miocolore"])) echo $ _POST ["miocolore"]; // Se è selezionato almeno 1 elemento
else echo "Seleziona un valore";
?>

Questo elemento del modulo è progettato per creare un'area in cui è possibile inserire più righe di testo. In tale campo di testo, sono consentite interruzioni di riga, che vengono salvate quando si inviano dati al server.

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

La sintassi per la creazione di un campo è la seguente.

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

Gli attributi validi sono elencati nella tabella. uno.

tab. 1. Attributi

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

Riso. 1. Tipo di campo di testo predefinito

Per

Risultato questo esempio mostrato in fig. 2. Notare che vengono presi in considerazione tutti gli spazi e le interruzioni di riga all'interno. e ha i seguenti parametri:

nome- nome del campo,

cols- larghezza del campo in caratteri,

righe- il numero di righe di testo visibili sullo schermo,

avvolgere- metodo di sillabazione delle parole:

spento- non avviene alcun trasferimento,

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

fisico- trasferire sia sullo schermo che all'ingresso del server.

Disabilitato- campo inattivo,

sola lettura- è consentita solo la lettura.



Risultato:

Elenchi a discesa

Gli elenchi sono selezionabili singolarmente e selezionabili multipli. Entrambi sono impostati utilizzando i tag , all'interno del quale si trovano gli elementi dei valori, definito dal tag Consideriamo i parametri di questi tag:



Quanto tempo sei disposto a dedicarci:



Quali giorni della settimana ti si addice per le lezioni:

(selezionare con premuto con il tasto ctrl)

Risultato:

Ci sono anche tag<optgroup> ... che consentono di raggruppare gli elementi dell'elenco secondo alcuni criteri. Ad esempio, per creare una directory di siti sotto forma di elenco, è più conveniente dividerla in gruppi per interessi. Si prega di notare in in questo caso i tag di chiusura devono essere specificati... Codice d'esempio:

Directory del sito:

Risultato:

scritta

Tutti gli elementi del modulo possono essere collegati alle loro etichette utilizzando l'elemento e il suo parametro for, il cui valore è il nome dell'elemento a cui associamo la didascalia. Ad esempio:

Risultato:

Condizione di lavoro

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

1.titolo;

2. testo esplicativo della finalità del modulo;

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

4. scavando - " INVIARE», « CHIARO»;

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

Figura 1 - Visualizzazione approssimativa della pagina

Aggiungi il pulsante a ogni campo del modulo. Spiegazione", Quando si fa clic su cui si apre una finestra con informazioni esplicative e/o un'immagine, il pulsante" CHIUDERE».

Quando fai clic su " INVIARE", I dati del modulo vengono controllati per la corretta compilazione - tutti i campi sono compilati, campi numerici contenere valori consentiti, gli spazi iniziali e finali vengono rimossi. Se i dati di uno o più campi non corrispondono, dovrebbe essere visualizzata una finestra in cui indicare il nome e un breve testo che spieghi 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. Posiziona due campi nascosti nel modulo con data odierna e ora, che vengono anche trasmessi al server. Una visione approssimativa del modulo:

Figura 2 - Vista approssimativa del modulo di inserimento dati

Tabella 1 - Varianti dei moduli di inserimento dati

Opzione Descrizione
Negozio, sezione, nome completo Quantità 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 dell'auto, numero, colore, anno di fabbricazione, chilometraggio
Razza del cane, soprannome, padre, madre, data di nascita, nome completo del proprietario
Tipo di ortaggi, nome della varietà, data di impianto, data di raccolta, raccolta
Disciplina, Volume di lezioni, Volume di laboratorio, 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 vendite
Nome vetta, Quota, Paese, Anno di conquista, Numero di salite
Nome completo, anno di nascita, altezza, peso, gruppo sanguigno
Nome completo, Campo di attività, Anno di nascita, Paese, Numero di pubblicazioni

Domande di controllo

1. Descrivi il tag per creare la casella di testo. Indica la sua sintassi.

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

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

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

5. Descrivere il tag per la creazione del campo di selezione file. Indica la sua sintassi.

6. Descrivere un tag per creare una casella di testo su più righe. Indica la sua sintassi.

7. Descrivere il tag per la creazione dell'elenco a discesa. Indica la sua sintassi.

Insegnante Stishenok E.O.

Farberov A.G.

Ultimo aggiornamento: 08.04.2016

Una casella di testo a una riga viene creata utilizzando un elemento di input quando il suo attributo type è impostato su text:

È possibile utilizzare una serie di attributi aggiuntivi per personalizzare la casella di testo:

    dirname: imposta la direzione del testo

    lunghezza massima: massima importo consentito caratteri nella casella di testo

    pattern: definisce il pattern a cui deve corrispondere il testo di input

    segnaposto: imposta il testo che viene visualizzato nella casella di testo per impostazione predefinita

    readonly: rende il campo di testo di sola lettura

    obbligatorio: indica che il campo di testo deve avere un valore

    size: imposta la larghezza della casella di testo in caratteri visibili

    valore: imposta il valore predefinito nella casella di testo

Applichiamo alcuni attributi:

Campi di testo in HTML5

Questo esempio imposta gli attributi maxlength e size nella seconda casella di testo. In questo caso, size, ovvero il numero di caratteri che rientrano nello spazio visibile del campo è maggiore del numero consentito di caratteri. Tuttavia, non saremo comunque in grado di inserire caratteri superiori a maxlength.

In questo caso, è anche importante distinguere tra gli attributi value e placeholder, sebbene entrambi siano impostati testo visibile in campo. Il segnaposto, tuttavia, imposta una sorta di suggerimento o richiesta di input, quindi di solito è selezionato in grigio... Considerando che valore rappresenta il testo predefinito inserito nel campo:

Gli attributi readonly e disabled rendono inaccessibile il campo di testo, tuttavia, sono accompagnati da diversi effetto visivo... In caso di disabilitato, il campo di testo è ombreggiato:

Tra gli attributi della casella di testo, si dovrebbe anche notare un attributo come elenco. Contiene un riferimento a un elemento datalist, che definisce un insieme di valori che appaiono come suggerimento mentre si digita in una casella di testo. Ad esempio:

Campi di testo in HTML5

L'attributo list della casella di testo punta all'id dell'elemento datalist. L'elemento datalist stesso utilizza elementi di opzione nidificati per definire gli elementi dell'elenco. E mentre digiti nella casella di testo, questo elenco viene visualizzato come suggerimento.

Campo di ricerca

Per creare campi di ricerca, è previsto elemento di input con l'attributo type = "cerca". Formalmente, è un semplice campo di testo:

Cerca in HTML5

Campo di inserimento della password

Per inserire una password, utilizzare l'elemento di input con l'attributo type = "password". Il suo segno distintivoè che i caratteri inseriti sono mascherati da punti:

Principali articoli correlati