◾ 폼을 만드는 기본 태그 ◾ <form>과 </form> 사이에 여러 폼 요소 삽입 ◾ 기본형 : <form [속성="속성값"]> 여러 폼 요소 </form>
💬 서버
<form action="register.php">
/* 여러 가지 폼 요소 */
</form>
◾ 폼에 내용을 입력하고 서버로 전송했을 때 서버에 있는 register.php를 실행한다.
💬 <form> 태그의 속성
💡 폼 삽입하기
💬 <fieldset> 태그 ◾ 폼 요소를 그룹으로 묶는 태그
💬 <legend> 태그 ◾ 그룹으로 묶는 구역에 제목을 붙이는 태그
💬 <label> 태그 ◾ <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용
💡 <input> 태그
💬 <input> 태그의 type 속성 한 눈에 살펴보기 💬 다양한 속성 ◼ autofocus ◾ 페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시
◼ placeholder ◾ 입력란에 표시하는 힌트로, 필드를 클릭하면 사라짐
◼ readonly ◾ 내용을 보기만 하고 입력하지 못하게 함
◼ required ◾ 필수 필드 체크 ◾ 필수 필드는 브라우저에서 직접 체크하는 것이므로 오류 메시지 내용은 브라우저마다 다르게 나타남
💬 type = "text" ◾ 한줄짜리 텍스트 입력 필드 ◾ 주로 아이디나 이름, 주소 등 텍스트 입력
💬 type = "password" ◾ 비밀번호 입력란 ◾ 사용자가 입력하는 내용이 ' * ' 나 ' • ' 로 표시된다. 💬 type = "search" ◾ 검색 필드 ◾ 검색 창에 x 표시가 되어 검색어 삭제 쉬움
💬 type = "url" ◾ 웹 주소 필드 ◾ http://로 시작하는 사이트 주소 입력
💬 type = "email" ◾ 메일 주소 입력 필드 ◾ 메일 주소 형식 자동 체크
💬 type = "tel" ◾ 전화번호 입력 필드 ◾ 사용자 입력을 체크하지는 않음
💬 type = "radio" ◾ 여러 항목 중 하나만 선택할 때
💬 type = "checkbox" ◾ 여러 항목 중 둘 이상을 선택할 때
💬 type = "number" ◾ 숫자 입력 필드 ◾ 브라우저에 따라 스핀 박스로 표시됨
💬 type = "range" ◾ 숫자 입력 필드 ◾ 슬라이드 막대를 이용해 숫자 입력 💬 type = "date", type = "month", type = "week" ◾ 달력을 이용해 날짜 입력 💬 type = "time", type = "datetime-local" ◾ 시간 입력
💬 type = "submit", type = "reset" ◾ 폼 전송/리셋 버튼 ◾ 전송(submit) 버튼 : 사용자 입력 내용을 서버로 전송 ◾ 리셋(reset) 버튼 : 사용자 입력 내용 전부 삭제 ◾ value 속성을 이용해 버튼 표시 내용 지정
💬 type = "image" ◾ submit 버튼 대신 이미지 삽입
💬 type = "button" ◾ 기능 없이 버튼 형태만 삽입 ◾ 주로 버튼 클릭해서 자바스크립트 실행할 때 사용 ◾ value 속성을 이용해 버튼 표시 내용 지정
💬 type = "file" ◾ 파일 첨부 ◾ '파일 선택' 이나 '찾아보기' 버튼으로 표시됨
💬 type = "hidden" ◾ 화면 상의 폼에는 보이지 않는다. ◾ 폼을 서버로 전송할 때 서버로 함께 전송되는 요소
💡 그 외 태그
💬 <textarea> ◾ 여러 줄의 텍스트 입력 ◾ 게시판 글 입력 양식, 사용자 약관 등
💬 <select> ◾ 여러 옵션 중에서 선택 - 드롭다운 목록 ◾ 공간을 최소한으로 사용하면서 여러 옵션 표시 가능
💬 <optgroup>
💬 <option>
💬 <datalist>, <option> ◾ 데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 텍스트 필드에 입력됨 ◾ 데이터 목록에 id를 이용해 이름을 붙임 ◾ <input> 태그의 list 속성에 데이터 목록 id를 지정함
💬 <button> ◾ 다양한 형태의 버튼 삽입 ◾ 화면 낭독기에서 버튼임을 정확히 전달할 수 있음 ◾ CSS를 이용해 원하는 형태로 꾸밀 수 있음
댓글