구글폼 클론 코딩
🔗 url : https://seohee3478.github.io/googleform/003_googleform.html
- 기본 화면 상단
- 기본 화면 하단
- input 의
radio
type 사용하여 단일선택 할 수 있도록 설정 - input 의
checkbox
type 사용하여 중복선택 할 수 있도록 설정 - input 의
text
type 사용하여 짧게 주관식으로 입력받을 수 있도록 함 textarea
태그 사용하여 긴 주관식 입력받을 수 있도록 함datalist
태그와option
태그를 이용하여 답안을 선택지 중에서도 선택할 수 있도록 함- input 의
time
type을 사용하여 날짜를 선택할 수 있도록 함 - input 의
date
type을 사용하여 시간을 선택할 수 있도록 함
- 사용하는 이유
label
태그는input
태그를 설명할 때 사용- for 속성을 연결하면 label 태그를 클릭했을 때 input 태그에 자동으로 포커스가 간다(체크박스와 라디오 버튼은 레이블을 클릭했을 때 해당 항목이 클릭 됨)
- 웹 접근성을 위해서 사용
- 사용하는 방법
- 명시적 작성 방법(label의 for 속성과 input의 id 속성을 명시함으로써 연결해주는 방식)
<label for = "name">이름</label> <input type="text" id="name">
label
태그의 for 속성에input
태그의 id 속성을 입력해서label
태그가 어떤input
태그를 나타내는지 알려줌
2. 암시적 작성 방식(label 태그 안에 input 태그를 넣음으로 암묵적으로 연결)<label> 이름<input type="text" id ="name"> </label>
- input 태그는 사용자로부터 정보를 입력받을 수 있게 해주는 태그
- type 속성에 따라 다양한 입력 양식을 사용할 수 있음
<input type="유형" 속성="속성값">
- type : 입력 태그의 유형을 설정하는 속성입니다.
- name : 서버로 전달되는 이름을 설정하는 속성입니다.
- value : 입력 태그의 초기 값을 설정하는 속성입니다.
type 속성 종류
-
text : 기본 텍스트를 입력하는 창을 생성해줍니다.
-
password : 비밀번호를 입력하는 창을 생성해줍니다.
-
button : 기본 버튼을 생성해줍니다.
-
radio : 라디오 버튼을 생성해줍니다.
-
checkbox : 체크박스를 생성해줍니다.
-
file : 파일 첨부 버튼을 생성해줍니다.
-
hidden : 사용자에게 입력받지 않고 기본으로 설정된 값을 서버로 전송합니다.
-
submit : 서버로 제출하는 버튼을 생성해줍니다.
-
reset : form에서 입력한 input 값들을 reset 시킵니다.
-
url : url 입력을 위한 필드를 정의합니다.
-
search : 검색 문자열 입력을 위한 텍스트 필드를 정의합니다.
-
tel : 전화번호 입력을 위한 필드를 정의합니다. (모바일 브라우저에서 키보드 배열이 변경 됨)
-
email : 메일 주소 입력을 위한 필드를 정의합니다.(모바일 브라우저에서 키보드 배열이 변경 됨)
-
time : 시간 지정을 지정하는 요소입니다. (시간은 00:00부터 23:59까지 입력하거나 스핀 박스의 화살표를 클릭해서 선택함) * 아직 모든 브라우저를 지원하지는 않습니다.
1) min - 날짜나 시간의 최솟값을 지정합니다. 2) max - 날짜 시간의 최댓값을 지정합니다. 3) step - 스핀 박스의 화살표를 누를 때마다 날짜나 시간의 증가값을 지정합니다. 4) value - 화면에 표시할 초기값을 지정합니다.