[HTML] form 태그 응용해보기!! feat.좋아하는 음식..

안녕하세요 오늘은 드디어 html의 마지막 시간..인줄 알았지만용..
form 태그에 관한 내용이 생각보다 많은 것 같아 한번 더 하게 될것 같네요ㅜㅜ
개념에 대한 것은 오늘 다 끝내구 다음시간에는 지금까지 배운 것들을 토대로
총정리 실습 문제를 하나 풀어보고 끝낼게요.

그럼 바로 시작해보겠습니당🚀

---

🗂️fieldset 과 legend 태그

하나의 폼에서 여러 구역으로 나눠야 할 때 사용해요.
쇼핑몰 사이트의 주문서 폼을 예시로 들자면, 사용자 정보와 배송 상품 정보를 분리해서 표시할 수 있죠.

• fieldset: 폼 안에 있는 태그들을 하나의 영역으로 묶어서 외곽선을 그려줘요.

• legend: fieldset 태그 안에 작성해주며 해당 그룹 안에 제목을 붙여줘요.➡️fieldset 태그로 외곽선을 그려주며 폼 안에 태그들을 묶어주었어요.
  그리고 그 안에 legend 태그로 제목을 붙이고
  ul 태그로 순서없는 목록을 만든 다음, 주문자 이름 항목과 배송지 항목을 만들었습니다.
  위 코드는 아래와 같이 출력돼요.

  

  <form>
  <fieldset>
      <legend>배송 정보</legend>
      <ul> 
          <li>
              <label for="name">주문자 이름</label> 
              <input type="text" id="name"> 
          </li> 
          <li> 
              <label for="adr">배송지</label> 
              <input type="text" id="adr"> 
          </li> 
      </ul>
  </fieldset> 
  </form>`

---

🔍input 태그의 다양한 속성

저번 시간엔 input 태그의 type 속성에 대한 값들을 알아봤는데요.
이번 시간에는 input 태그 자체 속성에 대해 알아볼게요.

• autofocus: 페이지를 열면 해당 input 태그로 자동으로 커서가 지정돼요.
• placeholder: 해당 필드에 입력할 내용에 힌트를 제공해줘요.
• readonly: 읽기 전용 태그로 변경해요.
• required: 필수적으로 입력해야 되는 필드에 지정해요.
  해당 필드를 작성하지 않고 제출하려고 하면 제출 버튼이 눌리지 않아요.

<form>
    <div>
        <label>아이디
            <input type="text" name="username" autofocus>
        </label>
    </div>
    <div>
        <label>비밀번호
            <input type="password" name="password" 
            placeholder="비밀번호는 숫자, 영문자 조합의 8자리 이상으로 설정"
            style="width: 20rem;">
        </label>
    </div>
    <div>
        <label>닉네임
            <input type="text" name="nickname" value="션" readonly>
        </label>
    </div>
    <div>
        <label>이메일
            <input type="text" name="email" required>
        </label>
    </div>
    <br>
    <input type="submit" value="전송">
</form>

➡️form 태그 안에 각각의 div 태그를 만들어줬어요.
웹페이지를 열면 아이디를 입력하는 필드에 처음으로 커서가 가도록
아이디 input 태그에 autofocus 속성을 주었고요.
비밀번호 input 태그에는 힌트를 제공했어요.
(style 속성은 창을 조금 늘리기 위해 사용했는데 css에서 배울 내용이니 지금은 모르셔도 됩니다)

출력 창은 아래와 같아요.

이렇게 웹페이지를 열자마자 커서가 아이디 창에 가있을 것을 확인할 수 있습니다.

이메일 값을 입력하지 않고 전송 버튼을 누르면 위와 같이 뜨게 돼요.

---

📂select과 option 태그

select 태그와 option 태그를 사용하면 드랍다운 목록을 만들 수 있어요.

• select: 드랍다운의 시작과 끝을 명시해요.
  • size 속성: 드랍다운 항목의 표출 개수를 지정
  • mutiple 속성: ctrl + 항목 선택 시 여러 개의 항목 선택이 가능
• option: 드랍다운의 항목을 작성해요.
  • selected 속성: 해당 속성이 추가된 항목을 기본값으로 지정

<form>
    <h2>사용 가능한 언어</h2>
    <select>
        <option>한국어</option>
        <option>영어</option>
        <option>일본어</option>
        <option>중국어</option>
        <option>프랑스어</option>
    </select>
</form>

➡️ select 태그로 드랍다운을 만들 수 있도록 해주었고, option 태그로 항목을 넣어주었어요.

출력화면은 아래와 같아요.

여기서 여러 속성을 추가해 볼게요.

<form>
    <h2>사용 가능한 언어</h2>
    <select size="3">
        <option>한국어</option>
        <option>영어</option>
        <option>일본어</option>
        <option>중국어</option>
        <option selected>프랑스어</option>
    </select>
</form>

➡️size 속성을 3으로 주어서 항목이 3개씩만 표출되도록 해주었어요.
그리고 selected 속성을 준 프랑스어가 기본으로 선택되었구요.

출력 화면은 아래와 같습니다.

---

📋optgroup 태그

optgroup 태그를 이용하면 드랍다운 항목을 주제별로 묶어줄 수 있어요.
바로 예시와 함께 설명드릴게욤.

<form>
    <h2>좋아하는 음식</h2>
    <select>
        <optgroup label="한식">
            <option>된장찌개</option>
            <option>떡볶이</option>
            <option>불고기</option>
        </optgroup>
        <optgroup label="일식">
            <option>규카츠</option>
            <option>소바</option>
        </optgroup>
        <optgroup label="양식">
            <option>알리오올리오</option>
            <option>뇨끼</option>
        </optgroup>
    </select>
</form>

➡️select태그 안에서 바로 option태그를 주는 것이 아닌,
주제별로 나우어 optgroup 태그로 묶어서 묶어주었어요.
각 optgroup 태그에 label값을 주어서 어떤 주제인지 명시해주었어요.

---

📝textarea 태그

기존의 input태그에서 type속성을 text로 변경하는게 있던거 기억나시나용?
그건 한줄짜리 text 필드만 생성되기에 여러줄을 입력할 수 있는 필드를 만들고 싶다면,
textarea 태그를 이용하셔야 돼요. 해당 태그의 속성들과 함께 알아볼게욥.

• cols 속성: 가로 길이 지정
• rows 속성: 세로 길이 지정

<div>
    <label>자기소개를 작성해주세요.
        <textarea cols="100" rows="15"></textarea>
    </label>    
</div>

➡️가로길이는 100자, 세로길이는 15자가 오도록 만들어주었어요.
출력 창은 아래와 같아요.

*label태그를 맨 첫 줄에 오게 하는건 나중에 css에서 배울 수 있습니다!

---

이렇게 ... 드디어.. html이 끝나게 되었습니다!!!
그럼 다음 시간에 지금까지 배운 태그들을 토대로 실습을 해보고 끝마칠게요.
문제 푸시려면 html 한번 쭉 정리해보긩...