Form4 HTML5 Tag-[사용자와의 커뮤니케이션을 위한 태그 4] <form> 사용자 입력 속성 속성 설명 placeholder 입력 내용 칸에 힌트 제공 required required 적용 요소에 내용이 비어 있을 경우 경고 메시지 표시 autocomplete 입력 요소에 자동완성 기능 여부 설정 (on/off) pattern 지정한 문자패턴과 입력된 내용의 일치 여부를 판단 multiple 이메일을 ','로 여러개 / 파일 업로드시 동시 선택할 수 있도록 해주는 속성 disabled 요소를 비활성화 상태로 만들어 주는 속성 readonly 입력된 내용을 수정할 수 없도록 만들어 주는 속성 placeholder 필드에 입력형식 힌트주기 아이디 비밀번호 required 필수입력 유효성 검사 주문자 정보 배송지 정보 autocomplete 자동완성 기능 전화번호 이메일 pattern 정규식 속성 휴.. 2020. 8. 1. HTML5 Tag-[사용자와의 커뮤니케이션을 위한 태그 3] <form> label tag 의미 및 특징 label form 요소(input, textarea, select)에 제목을 정의하는 태그 연결을 위해서 label태그 for 속성과 form요소의 id 속성 값을 동의하게 정의해야한다. ex) 아이디 form요소에 글상자나 버튼을 클릭하는게 아니라 label의 텍스트를 입력해도 동작이 되게 하기 때문에 사용자 측면에서 웹 접근성이 개선됩니다. 회원가입 입력 아이디 비밀번호 비밀번호 재입력 이메일 핸드폰 번호 선택010011 -- 회원가입 입력 아이디 비밀번호 비밀번호 재입력 이메일 핸드폰 번호 선택010011 -- 2020. 8. 1. HTML5 Tag-[사용자와의 커뮤니케이션을 위한 태그 2] <form> input 1. input 사용자로부터 데이터 값을 입력받기 위한 태그. type 속성 값에 따라 폼 컨트롤을 생성. type 속성 값 설명 text 한 줄 글 입력 상자. maxlength 속성으로 글자 수 제한 가능 password 비밀번호 입력 상자. 입력된 내용이 *로 표시된다. search 검색 입력 상자 date 년-월-일 선택 상자 datetime-local 년-월-일-시분초 선택 상자 month 년-월 선택 상자 week 년-주 선택 상자 time 시간 선택 상자 email 이메일 입력 상자 tel 전화번호 입력 상자 color 색상 선택 상자 number 숫자 선택 상자. min(최솟값), max(최댓값), step(선택 단계), value(시작값) 지정 가능 range 슬라이드바. min(최솟값).. 2020. 8. 1. HTML5 Tag-[사용자와의 커뮤니케이션을 위한 태그 1] <form> fieldset/legend, textarea, select 1. form 사용자가 입력한 데이터를 처리하는 프로그램으로 전송할 때 사용하는 태그 (사용자 입력 데이터 수집) 속성 설명 action 입력 데이터(form data)가 전송될 URL method 입력 데이터(form data) 전달 방식 method 속성 GET 방식 POST 방식 전송 URL 뒤에 데이터가 노출되기 때문에 주로 '검색'에 쓰임. URL 전송 데이터 노출되지 않지만 GET에 비해 속도가 느리다. 주로 '로그인', '회원가입'에 쓰임. 2. fieldset / legend : 양식 요소들을 그룹화 할때 사용 : 그룹화된(fieldset) 서식의 제목을 정의. form method get 방식 검색 : form method post 방식 ID : PW : fieldset/legend 로그.. 2020. 7. 31. 이전 1 다음
