3-10. HTML 태그 : 폼 요소<label for="..."><fieldset><legend><form action="..." method="get/ post">

3-10. HTML 태그 : 폼 요소

  

■ <label>

  - form 요소의 이름과 form 요소를 명시적으로 연결시켜주기 위해 사용

  - 즉, '이름' 텍스트를 클릭하면 이름을 입력할 칸의 커서가 깜빡이는 것

  - 이렇게 하면, 스크린 리더기가 form 요소에 접근하면 form 요소의 이름도 함께 읽어 줌

  - <label> 태그는 사용성 및 접근성 측면의 중요한 역할이므로 반드시 쓰는 것이 좋음

  - 속성으로는 for 속성이 있음

  - <label>...</label>

⊙ for 속성

  - <label> 태그의 내용과 연결할 form 요소를 연결시켜주는 연결고리

  - 속성 값에 들어갈 단어는 개발자가 임의적으로 입력

  - 단, 연결할 form 요소에 id 속성이 들어가는데, 그 id 속성값과 for 속성값이 동일해야함

 

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

                              ↓

 

■ <fieldset>

  - 여러개의 form 요소를 그룹화하여 구조화 하기 위해 필요한 태그

  - 자식태그로는 <legend> 태그가 있고, 자식태그 중 가장먼저 선언되어야 함

  - 구조화 할 태그 전체의 앞, 뒤를 <fieldset> 태그로 감싸주면 됨

  - <fieldset>...</fieldset>

▣ <legend>

  - form 요소의 제목

  - <fieldset> 내부에 선언되어야 함

 

1 <fieldset>

2            <legend>기본 정보</legend>

3            아이디:<input type="text" placeholder="영문으로만 써주세요">

4            비밀번호:<input type="password">

5            성별: 남자<input type="radio" name="gender" checked>,

6                   여자<input type="radio" name="gender">

7 </fieldset>

                              ↓

 

■ <form>

  - form 요소의 데이터를 묶어서 실제 서버로 전송해주는 역할의 태그

  - form 요소가 <fieldset> 태그로 구조화 되어 있으면, <fieldset> 태그까지 묶어서 전송 가능

  - 전송할 form 요소 전체의 앞, 뒤를 <form> 태그로 감싸주면 됨

  - <form>...</form>

⊙ action 속성

  - form 데이터를 처리하기 위한 서버의 주소를 속성 값으로 입력

⊙ method 속성

   - form 데이터를 전송하는 방식을 지정

   - 속성 값으로는 get, post 가 있음

   ㆍget : 데이터 전송시 웹페이지의 주소창에 파라미터 형태로 붙어 데이터가 표시되어 노출됨

   ㆍpost : 데이터가 전송시 데이터가 노출되지 않음 

 

    1 <form action="서버주소" method="post"> 

    2      <fieldset>

    3            <legend>기본 정보</legend>

    4            아이디:<input type="text" placeholder="영문으로만 써주세요">

    5            비밀번호:<input type="password">

    6            성별: 남자<input type="radio" name="gender" checked>,

    7                   여자<input type="radio" name="gender">

    8      </fieldset>

    9 </form>