☀️ [UIUX] 1217 HTML + CSS Coding, 코딩 중급 15
✏️ 2024. 12월 17일 / html + css 언어, 코딩 중급 15
👻 다양한 입력 양식 태그에 대해 알아봅시다
✨ <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. target : action에서 지정한 서버 주소를 현재 창이 아닌 다른 위치에서 열도록 지정합니다.
✨ 3. enctype : 폼 데이터가 서버로 제출될 때 해당 데이터가 인코딩 되는 방식을 명시합니다.
- application/x-www-form-urlencoded : 기본 값으로 모든 문자들을 서버로 보내기전에 인코딩됨을 명시합니다.
- multipart/from-data : 모든 문자들을 인코딩하지 않음을 명시합니다.
이 방식은 form 요소가 파일이나 이미지를 서버로 전송할 때 주로 사용합니다.
- text/plan : 공백 문자는 '+'기호로 변환하지만 나머지 문자는 인코딩 되지 않음을 명시합니다.
✨ 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" name="phone" id="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> </form>
🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)
