HTML5 & CSS3 배워보자 (3화 : Form)

오늘은 HTML에서 가장 흔히 사용되는 요소 중 하나인 폼(Form)에 대해 공부해보려고 합니다. 폼은 사용자가 웹사이트에서 정보를 입력하는 용도로 사용되며, 주로 로그인이나 회원가입과 같은 곳에서 볼 수 있습니다.

 

하지만 유의할 점은 각 브라우저가 폼 요소를 지원하는 방식이 조금씩 다를 수 있다는 것입니다. 따라서 표준이 확립되기 전까지는 각 요소를 하나씩 테스트하며 확인하는 습관을 가지는 것이 중요합니다.

 

이제 폼과 관련된 내용에 대해 좀 더 자세히 알아보도록 하겠습니다.

 

 

 

1.form 태그

<form>태그는 HTML에서 폼을 정의할 때 사용되는 요소입니다. 폼은 사용자로부터 정보를 입력 받는 데 사용되며, 로그인, 회원가입, 검색 등 다양한 상호 작용 기능을 구현할 때 필수적으로 활용됩니다. <form> 태그는 폼 요소를 시작하고, </form> 태그는 폼 요소를 종료합니다.

 

<form 속성>

• method : 사용자의 입력값을 서버 쪽 프로그램으로 어떤 방식으로 넘겨줄지 지정. get 방식과 post 방식으로 전송.
• name : 폼의 이름을 지정하는 속성. 여러개의 <form> 태그가 존재 할 경우 구분을 위해 사용.
• action : <form> 태그 안의 값을 처리해줄 서버 상의 프로그램을 지정.
• target : <action> 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 지정.
• autocomplete : 이전에 입력한 내용이 아래에 표시되는 자동 완성 기능.

 

<기본형>

<form 속성 = "속성 값"> 폼 요소 </form>

 

<예시>

<form action="/submit_form" method="post">
    <label for="username">사용자 이름:</label>
    <input type="text" id="username" name="username"><br><br>

    <label for="password">비밀번호:</label>
    <input type="password" id="password" name="password"><br><br>

    <input type="submit" value="제출">
</form>

 

<예시화면>

 

 

 

 

2.label 태그

<label> 태그는 HTML에서 입력 요소(input element)와 함께 사용되어 해당 입력 요소에 레이블을 제공하는 데 사용됩니다. 이 레이블은 사용자가 입력해야 할 내용을 설명하거나 해당 입력 요소를 식별하는 데 도움이 됩니다.

보통 <label> 태그는 입력 요소 앞에 오며, for 속성을 사용하여 해당 입력 요소의 id와 연결됩니다. 이는 웹 접근성을 향상시키고 스크린 리더 사용자가 폼을 쉽게 이해할 수 있도록 도와줍니다.

 

<기본형>

<label for = "id 이름">
    <input id = "id 이름" 속성 = "속성 값">
</label>

또는

<label for = "id 이름"> 레이블 </label>
<input type = "text" id = "id 이름">

 

 

<예시>

<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username"><br><br>

<label for="password">비밀번호:</label>
<input type="password" id="password" name="password"><br><br>

 

 

※ 스마트폰 같은 작은 화면에서는 라디오 버튼이나 체크박스를 정확히 터치하기가 힘듭니다. 그렇기에 Label 태그를 사용하여 연결을 시켜 놓으면 텍스트만 터치해도 라디오 버튼이나 체크박스가 터치가 되기에 사용이 훨씬 편리하게 됩니다.

 

 

 

3.fieldset, legend 태그

하나의 폼 안에서 구역을 나누어 표시하고 싶을 때 사용하는 태그입니다. <fieldset> 태그는 <fieldset> ~ </fieldset> 태그 사이의 내용을 하나의 영역으로 표시하는 외곽선을 그려주고, <legend> 태그는 <fieldset>으로 묶은 영역의 제목을 표시해 줍니다.

 

<기본형>

<fieldset 속성 = "속성 값"> 내용 </fieldset>

 

<예시>

<form action="/login" method="post">
    <fieldset>
        <legend>로그인 정보</legend>
        <label for="username">사용자 이름:</label>
        <input type="text" id="username" name="username"><br><br>

        <label for="password">비밀번호:</label>
        <input type="password" id="password" name="password"><br><br>
    </fieldset>

    <input type="submit" value="로그인">
</form>

 

 

<예시화면>

 

 

※ 다음화에서는 <input> 에 대해서 공부하겠습니다!!