Come creare una barra di ricerca in HTML
Componenti diversi costituiscono le pagine Web dell'applicazione, come il caricatore, le barre di navigazione, le barre di ricerca e altro ancora. Le proprietà CSS sono utilizzate per modellare questi componenti. Più specificamente, il componente che è quasi obbligatorio per ogni applicazione è il "Barra di ricerca". Le barre di ricerca vengono utilizzate per dare una migliore accessibilità agli utenti in modo tale che gli utenti cercano componenti invece di navigare nell'intero sito Web.
Questo post guiderà su:
- Cos'è una barra di ricerca?
- Come creare barra di ricerca in html?
- Come aggiungere la proprietà di transizione al pulsante di barra di ricerca?
Cos'è una barra di ricerca?
La barra di ricerca è un elemento di controllo grafico di qualsiasi applicazione. Consiste principalmente in una casella di testo a linea singola e un pulsante. Funziona in modo tale che l'utente digiti le informazioni nel campo di input per cercare, quindi preme il pulsante per ottenere i risultati.
Come creare barra di ricerca in html?
In primo luogo, aggiungi un elemento div con la classe "ricerca di ricerca". Aggiungi un altro tag DIV con il nome della classe "barra di ricerca"All'interno di questo div. Quindi, posiziona un tag di input e un tag pulsante al suo interno. Il tag di input è associato agli attributi "tipo"Con un valore come"testo", E un"segnaposto"Viene utilizzato per mostrare un po 'di testo in un campo di input.
Ecco il codice HTML:
CSS
In CSS, vengono utilizzate proprietà diverse per modellare la barra di ricerca. Discutiamoli uno per uno!
Stile tutti i tipi di elementi
*
Margine: 0;
imbottitura: 0;
Dimensizzazione di scatole: bordo-box;
Font-Family: Verdana, Ginevra, Tahoma, Sans-Serif;
Il simbolo asterisco "*" viene utilizzato per rappresentare tutti i tipi di elementi e, se è seguito da nomi di elementi, classe o ID, rappresenterà tutto quel nome specificato nell'intero documento.
- "margine"La proprietà con valore 0 non fornirà spazio attorno a nessun elemento.
- "imbottitura"Con il valore 0 definisce che non viene assegnato spazio attorno al contenuto.
- "dimensionamento della scatola"Con il valore del bordo-box include l'imbottitura e il bordo dell'altezza totale dell'elemento e della larghezza.
- "famiglia di font"Viene utilizzato per selezionare il carattere di tutti gli elementi.
Elemento "corpo" di stile
corpo
Background-color: Darkslategrey;
Il colore di sfondo dell'intera sezione del corpo è impostato su "Darkslategrey" colore.
Stile "Search-Main" Div
.Search-Main
Background-color: RGBA (0, 0, 0, 0.159);
Licromra massima: 700px;
Margine: 150px Auto;
Altezza: 400px;
raggio di confine: 30px;
L'elemento con attributo di classe-main è avere proprietà diverse descritte di seguito:
- "larghezza massima"Specifica il limite massimo di larghezza.
- "altezza"Specifica l'altezza totale del Div a 400px.
- "raggio di confine"Fornisce un raggio di 30px attorno all'elemento Div.
- IL "colore di sfondo" E "margine"Le proprietà funzionano come discusso sopra.
Stile "Search-Bar" Div
.barra di ricerca
display: flex;
giustificare contento: centro;
ALIGE-ITMS: CENTRO;
Altezza: 100%;
Il Div della barra di ricerca è disegnato con le proprietà CSS discusse di seguito:
- "Schermo"Proprietà Flex viene utilizzata per rendere il layout flessibile reattivo del Div.
- "giustificare il contenuto"Allinea gli elementi flessibili del Div in orizzontale.
- "allineare"Imposta l'allineamento degli articoli flessibili in verticale.
- "altezza"La proprietà si comporta come spiegato sopra.
Elemento "input" di stile
.Input di Search-Bar
bordo: 1px solido RGB (47, 63, 63);
imbottitura: 20px 30px;
Font-size: 24px;
Background-color: RGB (85, 104, 104);
Colore: #ffffff;
contorno: nessuno;
Il campo di input del Div della barra di ricerca viene data proprietà spiegate di seguito:
- "confine"La proprietà imposta il bordo attorno al campo di input con la larghezza, lo stile della linea e il colore.
- "dimensione del font"La proprietà specifica la dimensione del carattere del testo.
- "colore"Definisce il colore del testo del campo di input.
- "contorno"La proprietà con il valore 0 non imposterà alcuna linea attorno al bordo dell'elemento, principalmente quando viene cliccata.
- IL "imbottitura" E "colore di sfondo"Le proprietà si comportano come indicato sopra.
Stile segnaposto
.Search-Bar Input :: Placeholder
Colore: #dadada;
L'attributo segnaposto del campo di input del Div della barra di ricerca è assegnato con "colore"Proprietà #dadada. Applicherà il colore al testo del segnaposto.
Pulsante di stile
.pulsante di ricerca di barra
bordo: 1px solido RGB (47, 63, 63);
imbottitura: 20px 30px;
Font-size: 22px;
Background-color: RGB (12, 33, 33);
Colore: #A3A3A3;
Cursore: puntatore;
Margin-Left: 10px;
Di seguito sono spiegate le proprietà dell'elemento pulsante del div di ricerca della barra di ricerca:
- "cursore"La proprietà specifica lo stile del cursore del mouse quando si punta al pulsante.
- "margine-sinistra"Aggiungerà un po 'di spazio a sinistra del pulsante.
- Tutte le altre proprietà funzionano allo stesso modo.
Eseguindo il codice sopra menzionato, otterremo il risultato come mostrato nell'immagine seguente:
Come sappiamo, le proprietà di transizione e animazione sugli oggetti le rendono più interattive e divertenti. Quindi, la sezione successiva descrive l'aggiunta di una transizione sul pulsante di ricerca.
Come aggiungere la proprietà di transizione al pulsante di barra di ricerca?
Aggiungi la proprietà di transizione con il valore impostato come "Tutti 0.3s facilità" al ".Pulsante di ricerca", Dove tutto indica tutte le proprietà, 0.3s indica la durata della transizione e la facilità indica un inizio lento, quindi veloce e termina lentamente:
Transizione: tutti 0.3s facilità;
Ora, per effettuare la transizione sul pulsante su Hover, l'elemento del pulsante viene disegnato come menzionato nel blocco del codice seguente.
Pulsante di stile su Hover
.Pulsante di ricerca: hover
trasformazione: traduzione (-5px);
L'elemento pulsante viene disegnato utilizzando la trasformazione della proprietà con il valore "Translatey (-5px)"Il che significa che sul mouse hover, il pulsante si muoverà in posizione verticale.
L'effetto aggiunto può essere visto nell'immagine seguente:
È fantastico! Una barra di ricerca interattiva viene creata correttamente in HTML usando CSS.
Conclusione
In HTML, una barra di ricerca è costituita principalmente da un campo di input e un pulsante, che usa ed elementi. I componenti Web possono essere disegnati come interattivi fornendo proprietà di animazione e transizione, come menzionato. Questo blog ha spiegato come creare una barra di ricerca in HTML con un esempio approfondito.