키보드와 하루

1. 개념 size,maxlength,minlength - 길이, 최대 글자 수, 최소 글자 수 size : 텍스트 필드 , 비밀번호 필드 , 검색 필드와 같이 한 줄로 입력되는 필드에서 화면에 몇 글자까지 보여지게 할지 지정 maxlength : minlength와는 반대로 최대 몇 글자까지 입력할 수 있는지를 지정 minlength : 최소 몇 글자까지 입력해야 하는지를 지정 2. 태그 size,maxlength,minlength html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 DOCTYPE html> 1 size 속성 : 2 maxlength 속성 : 3 minlength 속성 : 결과 화면 코드 설명 1 size를 10으로 지정한 뒤에 size..

1. 개념 readonly,required - 읽기 전용,필수 값 지정 readonly : input type=text에서 텍스트를 표시하고 수정하지 못하고 오직 읽게만 만들어 줌 required : 폼에서 submit 버튼을 눌렀을 때 필수로 입력하게 지정하여 필수로 입력되어야 할 필드를 설정할 수 있음 2. 태그 readonly,required html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 DOCTYPE html> 1 readonly 속성 : 2 required 속성 : 결과 화면 코드 설명 1 readonly는 입력되어 있는 텍스트를 오로지 읽기만 가능하게 합니다. 읽기만 하려고 하면 구지 input type=text를 사용하지 않고 다른 방법으로 이용할 수 ..

1. 개념 autofocus,placeholder - 커서 위치,힌트 표시 autofocus : input type=text 일 때 페이지를 불러오게 되면 이 속성이 있는 곳에 커서가 위치하게 됨 placeholder : 텍스트를 입력할 때 먼저 힌트 내용을 표시하여 사용자로 하여금 도움을 줄 수 있도록 하는 것 2. 태그 autofocus,placeholder html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 DOCTYPE html> 1 autofocus 속성 : 2 placeholder 속성 : 결과 화면 코드 설명 1 autofocus를 사용하게 되면 페이지가 열리자마자 제일 먼저 입력해야 할 내용이 무엇인지 커서가 위치해 줍니다. 이렇게 해주면 사용자가 이용하는..

1. 개념 input type = image,button,file - 이미지 버튼, 버튼 , 파일 첨부 image 타입 : submit 버튼 대신 전송 이미지를 삽입하여서 사용할 수 있음 button 타입 : 버튼 형태를 만들어서 사용이 가능하고 여기에는 submit이나 reset과 같은 기능은 없음 file 타입 : 파일을 첨부하여 사용 가능 2. 태그 input type = image,button,file html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 DOCTYPE html> 1 image 필드 : 2 button 필드 : 3 file 필드 : 결과 화면 코드 설명 1 image 타입에서 중요한 것은 submit 버튼 대신이라는 것입니다. ..

1. 개념 input type = time,datetime-local,submit,reset - 시간,날짜와시간,전송,재작성 time 타입 : 시간만을 지정하고자 할 경우에 사용 datetime-local 타입 : 날짜와 시간을 함께 지정하고자 할 경우에 사용 속성 설명 min 날짜와 시간의 최소값 지정 max 날짜와 시간의 최대값 지정 value 화면에 표시할 초기값을 지정 submit 타입 : form 태그에 지정한 서버 프로그램 쪽으로 데이터를 전송 reset 타입 : 폼 안에 있는 모든 정보를 지우고 다시 작성할 수 있도록 초기화 시켜줌 2. 태그 input type = time,datetime-local,submit,reset html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13..

1. 개념 input type = color,date,month,week - 색상,날짜,월,주 color 타입 : 색상표에서 사용자가 색상을 선택할 수 있도록 하고 색상 값은 16진수로 표시해야 함 date 타입 : 달력에서 날짜를 선택했을 때 yyyy-mm-dd 형식으로 연도,월,일이 표시됨 month 타입 : 달력에서 날짜를 선택했을 때 yyyy-mm 형식으로 월까지만 표시됨 week 타입 : 1월 첫째 주를 기준으로몇 번째 주인지 연도와 주로표시가 됨 2. 태그 input type = color,date,month,week html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 DOCTYPE html> 1 color 필드 : 2 date..

1. 개념 input type = number,range,radio,checkbox - 숫자,슬라이드 막대,라디오,체크박스 number 타입 : 이 타입으로 설정하면 마우스 커서를 올리면 위아래로 보이는 버튼이 보이고 텍스트나 특수 문자는 입력이 안되고 오직 숫자만 입력됨 range 타입 : 슬라이드 막대를 움직여서 숫자 값을 입력함 속성 설명 min 최소값을 지정(기본 최소값 0) max 최대값을 지정(기본 최대값 100) step 숫자 간격을 지정(기본 값 1) value 초기값 설정 radio 타입 : 여러개의 항목 중에서 하나의 항목을 선택하여 값을 서버에 보내줌 checkbox 타입 : 여러 개의 항목 중에서 한 개 이상의 항목을 선택하여 값을 서버에 보내줌 속성 설명 name 이름을 지정(ra..

1. 개념 input type = search,url,email,tel - 검색,웹주소,메일주소,전화번호 search 타입 : 일반 텍스트 필드와 비슷해 보이지만 글을 입력할 때 오른쪽에 X 표시가 나타나게 되면서 입력한 값을 한번에 쉽게 지울 수 있도록 함 url 타입 : http://로 시작되는지를 자동으로 체크 해주는 필드 email 타입 : @문자를 포함해서 입력한 내용이메일 주소 형식인지를 체크해 주는 것 tel 타입 : 입력한 값을 체크하지는 않지만 서버에서 받을 때 입력한 문자가 텍스트가 아니라 전화번호라는 사실을 인식하게 함 2. 태그 input type = search,url,email,tel html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18..

1. 개념 input type = hidden,text,password - 숨김,텍스트,비밀번호 hidden 타입은 화면에서 입력한 어떠한 폼도 보이지 않고 숨겨진 value 값을 서버로 전송되는 요소를 말함 text 타입은 한 줄로 텍스트를 입력할 수 있는 필드를 말함 속성 설명 name 필드 구분을 위한 이름 붙이기 size 화면에 몇 글자까지 보이게 할 것인지를 지정 value 필드 부분에 표시되고자 하는 내용 maxlength 최대로 입력 가능한 문자 개수를 설정 password 타입은 입력한 내용이 화면에 보이지 않고 '*' 나 '·'로 표시됨 2. 태그 input type = hidden,text,password html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ..

1. 개념 fieldset,legend - 폼에서 그룹으로 표현 fieldset은 form 태그 안에서 쓰이는 요소들을 그룹으로 묶어서 표현하고자 할 때 사용 2. 태그 fieldset,legend html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 DOCTYPE html> 1 테스트 입력1 검색 테스트1 검색 테스트2 2 테스트 입력2 검색 테스트3 검색 테스트4 결과 화면 코드 설명 1 ....... form 태그 안에서 fieldset을 쓰면 그룹으로 요소들을 묶어서 표현할 수 있습니다. 예를 들어서 회원가입을 할 때 보면 위와 같은 화면을 볼 수 있습니다 그룹으로 묶어서 나눠서 표현하고자 할 경우에는 field..