Przykładowe formularze - część 2 - select, textarea

Pole select

Pole najczęście jest stosowane do wyboru jednej opcji z zdefiniowanej listy, choć istnieje również wersja wielokrotnego wyboru.

Domyślnie wybrana jest opcja pierwsza, jednak dodając atrybut selected do znacznika option można domyślnie zaznaczyć inną opcje niż pierwsza.

<form action="skrypt.php" method="post">
<p>
    <label for="wyksztalcenie">Poziom wykształcenia</label><br>
    <select name="wyksztalcenie" id="wyksztalcenie">
        <option value="brak">---</option>
        <option value="podstawowe">podstawowe</option>
        <option value="średnie" selected>średnie</option>
        <option value="wyższe">wyższe</option>
    </select>
</p>
<input type="submit" value="Prześlij">
<input type="reset" value="Wyczyść dane">
</form>

Pole select - multiple

Dodając atrybut multiple do znacznika select, tworzymy pole wielokrotnego wyboru. Więcej niż jedną opcje wybieramy z klawiszem CTRL.

Dodatkowo nazwa atrybutu name musi być zapisana jako tablica np. języki[], bo inaczej w formularzu zostanie wysłana tylko ostatnio wybrana opcja.

<form action="skrypt.php" method="post">
<p>
    <label for="jezyki">Języki obce:</label><br>
    <select name="jezyki[]" id="jezyki">
        <option value="angielski">język angielski</option>
        <option value="niemiecki">język niemiecki</option>
        <option value="hiszpanski">język hiszpański</option>
        <option value="wloski">język włoski</option>

    </select>
</p>
<input type="submit" value="Prześlij">
<input type="reset" value="Wyczyść dane">
</form>

Pole textarea

Pole stosowane jest do przesyłania dłuższych tekstów.

<form action="skrypt.php" method="post">
<p>
    <label for="jezyki">Doświadczenie zawodowe:</label><br>
    <textarea name="doswiadczenie" id="doswiadczenie" cols="50" rows="10"></textarea>
    <!-- atrybuty cols i rows oznaczają liczbę column (znaków) i wierszy, które zmieszczą się widocznej części pola.
    Do pola można oczywiście wprowadzić więcej znaków, niż wynika z jego wielkości, gdy znaki nie mieszczą się polu, to pojawia się suwak.
    -->
</p>
<input type="submit" value="Prześlij">
<input type="reset" value="Wyczyść dane">
</form>

Wklej poniższy tekst do pola.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi saepe adipisci odio error nostrum amet quo alias officia placeat ipsam? Aut, incidunt accusantium. Debitis minima autem pariatur. Amet, ad doloribus! Explicabo, eum? Ullam provident eum similique libero, velit saepe atque in. Necessitatibus eaque consequatur natus recusandae. Fuga ratione repellat ut magni beatae quisquam quibusdam consectetur nihil perspiciatis! Explicabo dolore, atque vitae maxime, commodi quo architecto doloribus provident natus doloremque libero porro est soluta ipsa dolores excepturi quibusdam! Aperiam, corrupti accusamus. Reprehenderit aut, maiores facere sequi alias esse, adipisci similique dolorum sint quam exercitationem consequuntur ipsum nostrum vel incidunt cupiditate perspiciatis! Soluta libero, eveniet quod fugit incidunt sed, explicabo dignissimos temporibus ab unde nulla natus reiciendis hic minus sapiente. Quo quas laudantium similique quae ab voluptates excepturi, eos dolor distinctio repellendus alias, recusandae accusantium ex enim, dolorem ratione debitis quisquam. Culpa excepturi quos nihil dignissimos. Officia ducimus laboriosam est sit voluptate illum provident iure voluptates commodi! Nesciunt fuga quam nisi, deserunt velit eos modi obcaecati fugiat earum sequi exercitationem doloremque mollitia harum suscipit maxime perspiciatis omnis numquam explicabo nam commodi repellat voluptates cum quibusdam eius! Molestiae expedita itaque dignissimos nam, alias vitae a rem magni dolor dolores consectetur quia vero? Quam?