📌다양한 입력양식 태그
✔️select, option
-
여러 데이터중에서 하나를 선택하거나 다중선택하게 할때 사용한다.
-
select태그는 option태그를 활용하여 옵션을 나열할 수 있고 기본값 1개만 선택이 가능하지만 multiple속성을 함께 쓰면 다중선택하게 만들 수 있다. ctrl키를 누른 상태에서 다중 선택한다.
-
selected속성을 사용하면 사용자에게 맨처음 보여줄 데이터를 지정할 수 있다.
-
disabled를 사용하면 option중 선택이 불가한 항목을 지정할 수 있다.
[기본형]
<select>
<option>데이터1</option>
<option>데이터2</option>
<option>데이터3</option>
</select>[속성]
- multiple : 데이터를 다중선택하게 만들때 사용한다. select태그안에
속성으로 선언한다.
- selected : 사용자의 편의를 위해 옵션을 미리 선택하여 보여준다.
option태그에 속성으로 선언하여 사용한다.
✔️textarea
-
장문의 글을 입력할때 사용하는 입력칸.
-
textarea태그를 쓸때는 태그 사이에 아무런 내용도 넣지 않아야 한다. 만약 공백이나 글자가 들어가면 pre태그처럼 그대로 보여준다.
-
글자수를 제한하고 싶다면 minlength,maxlength속성을 이용할 수 있다. 여기에 적힌 숫자만큼만 글자를 입력할 수 있다. length는 '총 개수'를 뜻한다.
[속성]
- cols : 영문 소문자를 기준으로 텍스트 영역의 넓이를 지정한다.
여기에 쓰여진 숫자만큼 영역의 넓이가 결정됨.
- rows : 줄을 기준으로 텍스트 영역의 높이를 지정한다. 지정한
줄보다 글자가 많아지면 스크롤바가 생긴다.
- wrap : 폼 데이터가 서버로 제출될때 입력된 텍스트의 줄바꿈 방식을
지정한다.
✔️button
- 기본 기능은 < input type='submit'> 과 동일하다.
-button태그는 뒤에 닫는 태그가 있어 내용자리에 이미지나 텍스트
이모지등을 넣을 수 있어 디자인된 버튼을 만들 수 있다.
- button태그도 type속성에 의해 기능이 결정된다.
[속성]
- submit : 기본기능으로, 폼요소를 서버에 제출한다.
- reset : 초기화 버튼
- button : 아무런 기능이 없는 버튼.(=깡통버튼) 자바스크립트로
어떤 기능을 연동할때 사용한다.[기본형]
<button type='기능'>버튼이름</button>
<input type='image' src='경로' />
제출버튼대신 사용할 이미지를 지정할 수 있다.
src로 이미지를 불러오면 해당 이미지가 제출 버튼의 기능을 한다.
📌form태그에 사용하는 공통속성★
✔️ 1. autocomplete
: 자동완성. 값을 on으로 명시하면 브라우저는 사용자가 이전에 입력했던 값들을 기반으로 사용자가 입력한 값과 비슷한 값들을 드롭다운해준다. 기본값은 off로 되어있다.
✔️ 2.taeget
: action에서 지정한 서버주소를 현재 창이 아닌 다른위치에서 열도록 지정한다.
✔️3.enctype
: 폼 데이터가 서버enctype 로 제출될때 해당 데이터가 인코딩되는 방식을 명시한다.
-
application/x-www-form-urlencoded : 기본값으로 모든 문자들을 서버로 보내기전에 인코딩됨을 명시한다.
-
multipart/form-data : 모든 문자들을 인코딩하지 않음을 명시한다.
이 방식은 form요소가 파일이나 이미지를 서버로 전송할때 주로 사용한다.
-
text/plain : 공백문자는 '+'기호로 변환하지만 나머지 문자는 인코딩되지 않음을 명시한다.
✔️4. novalidate
: 폼 데이터를 서버로 제출할때 해당 데이터의 유효성 검사를 하지 않음을 명시한다. input태그에도 쓸 수 있다.
📌input태그에 사용하는 공통속성★
✔️ 1. readonly
: 읽기전용 필드임을 명시한다. 사용자가 입력할 수 없고 읽기만 가능한 필드를 지정할 경우 사용한다.
✔️2. placeholder
: 사용자가 어떤 내용을 입력해야할지 힌트를 표시할때 사용한다.
✔️ 3. autofocus
: 페이지를 불러오자마자 특정 부분에 마우스 커서가 표시된다.
✔️4. autocomplete
: 해당 폼요소에 자동완성 기능을 부여한다.
✔️5. maxlength
: 텍스트 필드에 최대로 입력할 수 있는 문자의 개수를 지정한다.
✔️6. required
: 필수 입력 필드임을 지정한다.(빈칸이면 안넘어감)
✔️7. value
: 초기값을 지정한다. 실제로 필드에 나타나는 데이터로 placeholder와 다르게 입력필드를 포커싱해도 글자가 사라지지 않는다. 서버에 넘겨야 하는 값이 있을때 주로 사용한다.
수량 표시처럼 미리 값을 표시하는 용도로도 사용한다.
✔️8. size
: select태그를 쓸때 화면에 한번에 표시할 목록의 갯수를 지정한다.
<h2>폼양식 만들기</h2>
<form action="#" method="post" autocomplete="on" novalidate>
<!-- 아이디 -->
<div>
<label for="user_id">아이디</label>
<input type="text" id="user_id" name="user_id" required autofocus />
</div>
<!-- 비밀번호 -->
<div>
<label for="user_pw">비밀번호</label>
<input
type="password"
id="user_pw"
name="user_pw"
required
autocomplete="off"
minlength="8"
maxlength="16"
/>
</div>
<!-- 핸드폰번호 -->
<div>
<label for="phone">전화번호</label>
<input
type="tel"
id="phone"
name="phone"
placeholder="-은 제외하고 입력해주세요."
/>
</div>
<!-- 이용약관 -->
<div>
<h5>이용약관</h5>
<label for="terms">
<textarea
name="terms"
id="terms"
rows="3"
cols="20"
wrap="soft"
readonly
>
제1조(1항)여기에 회원가입한 사람은 탈퇴할 수 없다.</textarea
>
</label>
</div>
<!-- 제출버튼 -->
<button>제출하기</button>
