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>
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 : 기능없는 버튼. 자바스크립트로 기능을 넣을 수 있다.
<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>
'html' 카테고리의 다른 글
[html] 하나의 태그에 class 이름 여러 개 짓고 싶을 때 (0) | 2024.07.03 |
---|---|
[html] 입력양식태그 form > label / input type= / input 속성 / fieldset,legend (0) | 2024.06.21 |
[html] table 표 (2)_구조를 나타내는 태그 / 세로 줄을 동일하게 스타일링하는 <colgrop> <col/> (0) | 2024.06.19 |
[html] table 표 태그 (0) | 2024.06.18 |
[html] 멀티미디어 파일 - audio / video (0) | 2024.06.18 |