Podstawowe elementy formularzy

2.1 Element <input>

Formularze są ważnym elementem stron internetowych i pozwalają użytkownikom wprowadzać i przesyłać dane. Podstawowymi elementami formularzy są <input>, <textarea> i <button>. Te elementy pozwalają użytkownikom wprowadzać tekst, wybierać opcje, przesyłać pliki i wykonywać inne działania.

Element <input> jest jednym z najczęściej używanych elementów formularzy. Obsługuje wiele typów danych wejściowych i może być używany do różnych celów, takich jak wprowadzanie tekstu, wybieranie plików, wskazywanie dat itp.

Ogólna składnia:

    
      <input type="type" name="name" id="id" value="value" placeholder="placeholder" required>
    
  

Atrybuty <input>

• type: określa typ wejścia
• name: nazwa elementu formularza, używana do identyfikacji danych na serwerze
• id: unikalny identyfikator elementu
• value: początkowa wartość elementu
• placeholder: tekst zastępczy wyświetlany wewnątrz elementu przed wprowadzeniem danych
• required: wskazuje, że element jest wymagany do wypełnienia

Przykład <input>

input-text pozwala na wprowadzenie jednoliniowego tekstu.

    
      <input type="text" name="username" id="username" placeholder="Wprowadź nazwę użytkownika" required>
    
  

2.2 Element <textarea>

Element <textarea> służy do wprowadzania tekstu wieloliniowego. Różni się od <input type="text">, ponieważ pozwala na wprowadzenie tekstu obejmującego kilka linii i może być dostosowany pod względem rozmiaru.

Ogólna składnia:

    
      <textarea name="name"
        id="id"
        rows="rows" cols="cols"
        placeholder="placeholder" required>
      </textarea>
    
  

Atrybuty <textarea>

• name: nazwa elementu formularza, używana do identyfikacji danych na serwerze
• id: unikalny identyfikator elementu
• rows: liczba wierszy tekstu
• cols: liczba znaków w jednej linii
• placeholder: tekst zastępczy wyświetlany wewnątrz elementu przed wprowadzeniem danych
• required: wskazuje, że element jest wymagany do wypełnienia

Przykład użycia:

    
      <label for="comments">Komentarze:</label>
      <textarea name="comments"
        id="comments"
        rows="5"
        cols="40"
        placeholder="Wpisz swoje komentarze tutaj..."
        required>
      </textarea>
    
  

Stylizacja <textarea>

Element <textarea> można stylizować za pomocą CSS, aby poprawić wygląd i doświadczenie użytkownika.

Przykład stylizacji:

    
      textarea {
        width: 75%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical; /* resize będzie dostępny tylko w pionie */
      }
    
  

    
      <label for="comments">Komentarze:</label>
      <textarea name="comments"
        id="comments"
        rows="5" placeholder="Wpisz swoje komentarze tutaj..." required>
      </textarea>
    
  

2.3 Element <button>

Element <button> służy do tworzenia przycisków w formularzach. W przeciwieństwie do <input type="button">, element <button> jest bardziej elastyczny i pozwala na wstawianie różnych HTML elementów, takich jak tekst, obrazy itp. do przycisków.

Ogólna składnia:

    
      <button type="type" name="name" id="id" value="value">Tekst przycisku</button>
    
  

Przykład użycia:

    
      <button type="submit">Wyślij</button>
      <button type="reset">Zresetuj</button>
      <button type="button" onclick="alert('Przycisk wciśnięty!')">Naciśnij mnie</button>
    
  

Atrybuty <button>

1. type: określa działanie przycisku. Możliwe wartości:
   • submit: przesyła formularz (wartość domyślna)
   • reset: resetuje formularz
   • button: przycisk ogólny, nie wykonuje żadnych działań domyślnych
2. name: nazwa elementu formularza, używana do identyfikacji danych na serwerze.
3. id: unikalny identyfikator elementu.
4. value: wartość wysyłana na serwer przy przesyłaniu formularza.

Wbudowany HTML w <button>

Element <button> pozwala na wstawianie różnych elementów HTML, aby stworzyć bardziej złożone przyciski.

Przykład z wbudowanym HTML:

    
      <button type="type" name="name" id="id" value="value">
        📨Wyślij
      </button>
    
  

    
      <button type="type" name="name" id="id" value="value">
        <img src="submit_icon.png" alt="Wyślij">
        Wyślij
      </button>
    
  

Stylizacja <button>

Element <button> można stylizować za pomocą CSS, aby poprawić wygląd i doświadczenie użytkownika.

Przykład stylizacji:

    
      button {
        background-color: #4CAF50; /* Zielone tło */
        color: white; /* Biały tekst */
        padding: 15px 20px; /* Wewnętrzne odstępy */
        border: none; /* Bez ramki */
        border-radius: 4px; /* Zaokrąglone rogi */
        cursor: pointer; /* Wskaźnik kursora */
      }

      button:hover {
        background-color: #45a049; /* Ciemnozielone tło po najechaniu */
      }
    
  

    
      <button type="submit">Wyślij</button>