[html] form> textarea / select, option / button / datalist, option

 input을 제외한 다양한 입력양식

---

* form 태그 안에다 써야한다*

1. textarea
: 폼에서 텍스트를 여러 줄 입력해야 할 경우 텍스트 영역을 지정하는 태그(블로그쓸때도 textarea)

기본 글꼴이 굴림이라 글꼴을 다시 지정해줘야한다.

 

줄바꿈하면 공백이 들어가게 되어 항상 <textarea></textarea> 이렇게 붙여줘야한다. placeholder 넣을 수 있다. 

( placeholder -사용자가 텍스트를 입력할 때 입력란에 적당한 힌트 내용을 표시해주는 안내문구)
    

[속성]
    -cols : 텍스트 영역의 가로 너비를 문자 단위로 지정함. (알파벳 기준)
    -rows : 텍스트 영역의 세로 높이를 줄 단위로 지정함. 만약 지정한 숫자보다 줄 개수가 많아지면 
            스크롤 막대가 생긴다. 
    -maxlength : 최대 문자 갯수를 지정함. 텍스트를 입력할 수 있는 필드라면 어디든 적용가능한 속성. 

     ex) maxlength="20" 은 20글자만큼밖에 못쓰게 지정
    -minlength: 최소 입력 문자 갯수를 지정함. 텍스트를 입력할 수 있는 필드라면 어디든 적용가능한 속성. 

<form action="#" method="post">
<textarea placeholder="자기소개서" cols="20"rows="5" minlength="8"maxlength="20"></textarea>
</form>

    

 

2. select, option
: 드롭다운 목록을 만들 때 쓰는 태그. 
'셀렉트 박스'라고도 부른다. 사용자가 내용을 입력하지 않고 여러 옵션 중 어떤 항목을 선택하게 할 때 사용하는 태그. 쇼핑몰과 같은 곳에서 많이 사용하는 태그.
드롭다운 목록은 select 태그의 option 태그를 넣어서 항목을 지정할 수 있다. 

value는 나중에 자바에서 작업할 때 사용. 브라우저에 나타나진 않는다. 
  

[속성]
    -size : 화면에 표시할 드롭다운 항목에 개수를 지정함. (잘 안쓴다)
    -multiple: 다중 선택 드롭다운 목록을 만들 때 select에 지정함. (잘 안쓴다)
    ex) <select multiple size="5">

    -selected : 드롭다운 메뉴에서 먼저 보여주고 싶은 항목에 지정함. 해당 옵션이 먼저 선택되어 보여진다. 
    -value: 해당 항목을 서버로 넘길 때 저장할 값을 지정함.

 

 

<select multiple size="5">
<option value="0">컬러를 선택해주세요</option>
<option value="1" selected>오렌지</option>
<option value="2">레드</option>
<option value="3">차콜</option>
</select>

드롭다운 박스

selected 속성 추가했을 때

 

 

multiple / 테두리가 다르다

 

size : 화면에 표시할 드롭다운 항목에 개수를 지정함

 

3. datalist, option  ( 거의 안쓴다.)
 : 데이터 목록을 사용하면 텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택할 수 있다. 
자식태그로 option 태그를 사용한다. 이때 value 속성을 이용해 서버로 넘겨줄 값을 지정하는데 이 값이 텍스트 필드에 나타남. id선택자를 사용해서 데이터의
어떤 목록을 연결할지 값을 지정하면 된다. 

<label>포장여부</label>
<input type="text" name="package" id="package" />
<datalist id="package">
<option value="true">선물 포장</option>
<option value="false">포장안함</option>
</datalist>

 

 

 4. button ☆
: 버튼을 만드는 양식태그.

input type="submit"이나 "button", "reset"과 같은 역할을 하고 모양도 똑같다. 다만 여러 디자인을 넣을 수 있어서 이걸 더 자주 사용한다.  input보다는 button 태그를 일반적으로 제일 많이 사용함.

 

button태그는 일반 태그로, 태그 안에 이미지도 넣을 수 있고, 스타일도 다양하게 지정할 수 있어서 많이 사용함.

기본값은 submit이다.

 

[속성]
    - submit : 서버로 폼안의 정보를 넘김/ 전송버튼
    - reset: 사용자가 입력한 내용을 초기화함.
    - button : 기능없는 버튼. 자바스크립트로 기능을 넣을 수 있다.

왼쪽부터 submit / botton / reset

<button type="submit"><img src="./img/ch.svg" alt="확인" />확인</button>
<button type="button">
<img src="./img/ch.svg" alt="버튼" />기능 없는 깡통버튼
</button>
<button type="reset">
<img src="./img/ch.svg" alt="취소" />작성취소
</button>