HTML5 / select 태그 / option 태그 / textarea 태그 / button 태그

<Today's Goals>

• 다양한 태그를 활용하여 상품주문서 폼 만들기
• <select>,<option><optgroup>태그 활용하여 드롭다운 목록 만들기
• <datalist>,<option> 태그
• <textarea> 태그
• <button> 태그

<What i learned>

• 주문서 작성할 때 예시 화면이랑 수량 입력란의 길이가 달라서 스타일 오류인줄 알고 몇번이나 체크하였으나 스타일 오류가 아니었다. 처음부터 끝까지 체크해보니, 수량 입력란의<input type="number" max="수량">에서 max 부분에 오타가 있었다. 최대 수량이 적용되지않아서 입력란이 크게 보이는 것이었다. 오탈자 항상 체크하자.

<Questions>

• Q : <select>태그 와 <datalist>태그의 차이는?

A: <select>태그는 오직 하나의 옵션만을 선택할 수 있는  form input type이다.

<datalist> 태그는 list에서 주어지는 어떤 옵션이든 선택이 가능하다. 

<datalist> 자체에 input을 넣어서 옵션을 추가할 수 있다. 하지만 <select>는 안된다. form input type가 아니다.

참고 문헌 사이트 

:https://www.geeksforgeeks.org/difference-between-datalist-select-tags-in-html/

• Q: <button>태그 속성에서 'button'은 자체 기능이 없이 버튼 생성만 한다는데 그럼 어떤 경우에 사용되는지?

A: <button> 을 눌렀을 때 실행될 event를 설정할 수 있다. <button>의 type을 button으로 설정하지 않으면 submit이 기본으로 적용된다. 

---

<상품주문서 작성하기>

1. 주문서 영역 나누기

<Fieldset>,<legend>태그 사용하여 큰 영역을 나눈다. (개인정보, 배송지 정보, 주문 정보 등)

<fieldset>
<lagend>개인정보</legend>
</fieldset>

2. 정보를 입력할 폼요소 추가한다.

<ul>
	<li>
    	<label for="uname" class="title">이름</label>
		<input type="text" id="uname" placeholder="여백없이 입력" required>
	</li>
    <li>
        <label for="tell" class="title">연락처</label>
        <input type="tel" id="tell" placeholder="연락가능한 번호">
    </li>
</ul>

3. checkbox를 이용해서 주문정보 입력란을 추가한다.

<fieldset>
    <legend>주문 정보</legend>
    <ul>
        <li>
            <label><input type="checkbox">과테말라 안티구아 (100g) </label>
            <label><input type="number" value="0" min="0" max="5">개 </label>
        </li>
        <li>
            <label><input type="checkbox">인도네시아 만델링 (100g) </label>
            <label><input type="number" value="0" min="0" max="5">개 </label>
        </li>
        <li>
            <label><input type="checkbox">탐라는도다(블렌딩) (100g) </label>
            <label><input type="number" value="0" min="0" max="5">개 </label>
        </li>
    </ul>
</fieldset>

4. 전송버튼을 추가한다.

<input type="submit" value="주문하기">
<input type="reset" value="다시 작성">

5. CSS소스를 추가해서 디자인 변경

상품 주문서

개인 정보

• 이름
• 연락처

배송지 정보

• 주소
• 전화번호
• 메 모

주문 정보

• 과테말라 안티구아 (100g) 개
• 인도네시아 만델링 (100g) 개
• 탐라는도다(블렌딩) (100g) 개

 

---

<select>,<optgroup>,<option>태그를 사용해 드롭다운 목록 만들기

사용자가 내용을 입력하지 않고 여러 옵션 중에 선택하도록 할 때 드롭다운 목록을 사용한다.

공간을 최소한으로 사용하면서 여러 옵션을 표시할 수 있다.

기본적으로 <select>와<option>태그를 사용하지만, <optgroup>을 이용해 옵션을 묶어서 표시할 수 있다.

 

<select>태그의 속성

• size : 화면에 표시될 드롭다운 메뉴의 항목 개수 지정할 수 있다.
• multiple : ctrl키를 누른 상태로 복수의 항목을 선택할 수 있다.

<option>태그의 속성

• value : 옵션을 선택했을 때 넘겨질 값을 지정한다.
• selected : 화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정한다.

여름방학 특강 신청

수강 신청인

• 학번
• 이름
• 학과 건축공학과 기계공학과 산업공학과 전기전자공학과 사학과 어문학부 철학

<datalist>태그, <option>태그

<datalist>태그를 사용하면 데이터 목록중에서 값을 선택하도록 만들 수 있다.

<input type="text" list="데이터 목록 id">
	<datalist id="데이터 목록 id">
    <option>...</option>
    <option>...</option>
    </datalist>

<textarea> 태그

직접 여러줄의 텍스트를 입력하는 영역을 만들 수도 있습니다. 게시판에서 게시물을 입력하거나 회원가입 양식에서 사용자 약관을 표시할 때 자주 사용한다. <textarea> 태그 너비 크기를 지정하는 cols속성 줄을 표시할지 지정하는 rows속성을 사용한다.

 

<textarea>태그 속성

• name : 다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정한다.
• cols : 텍스트 영역의 가로 너비를 문자 단위로 지정한다.
• rows :  텍스트 영역의 새로 길이를 줄 단위로 지정한다. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생성된다.

<button>태그

type 속성으로 버튼이 활성화 되었을 때 어떤 동작을 할지 지정한다.

• submit : 폼을 서버로 전송한다.
• reset : 폼에 입력한 모든 내용을 초기화시킨다.
• button :  버튼 형태만 만들 뿐 자체에 기능은 없다. 

<input type="submit" value="전송하기">
<button type="submit">전송하기</button>

위의 두 방법은 비슷한 용도로 사용할 수 있다.

<차이점>

1. <button>태그는 화면 낭독기에서 버튼이 있다는 것을 읽고 전달할 수 있다.

2. <button>태그를 사용한 버튼에는 콘텐츠를 포함할 수 있기 때문에 아이콘을 추가할 수 있고, CSS를 이용해 원하는 형태로 변형이 가능하다.