https://dm.n-mk.kr/manager/login → 아이디 회원가입 여기서 많이 보고 할것이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body></body>
</html>
폼 만들기
양식
- <form> 태그
- input : 입력
- text - 한줄 텍스트 입력
- password - 비밀번호 전용 / 입력 텍스트 감춤 처리
- radio - name 속성이 같은 여러개 중에서 한개 선택 → name 그룹당 하나만 선택 가능
- checkbox - 여러개 중에서 여러개를 선택
- submit - 양식 제출 버튼
- reset - 다시 입력 버튼button 태그 → 기본값이 submit 이라서 제출됨
reset - 다시 입력 버튼 button - 일반 버튼 → 보통 얘를 많이 쓴다. - type : submit - 제출 버튼 (기본값)
- 참고)
- label 태그를 radio, checkbox 태그를 감싸면 → 텍스트만 클릭해도 체크가 된다.
- radio, checkbox의 id 속성 값 → label 태그의 for 속성과 동일하게 연결(id와 for을 연결)
- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>회원가입</h1> <form> <dl> <dt>아이디</dt> <dd> <input type="text"> </dd> </dl> <dl> <dt>비밀번호</dt> <dd> <input type="password"> </dd> </dl> <dl> <dt>비밀번호 확인</dt> <dd> <input type="password"> </dd> </dl> <dl> <dt>회원명</dt> <dd> <input type="text"> </dd> </dl> <dl> <dt>취미</dt> <dd> <label> <input type="checkbox">취미1 </label> <label> <input type="checkbox">취미2 </label> <label> <input type="checkbox">취미3 </label> </dd> </dl> <dl> <dt>학년</dt> <dd> <input type="radio" name="grade" id="grade1"> <label for="grade1">1학년</label> <input type="radio" name="grade" id="grade2"> <label for="grade2">2학년</label> <input type="radio" name="grade" id="grade3"> <label for="grade3">3학년</label> </dd> </dl> <dl> <input type="button"> </dl> </form> </body> </html>
- <!-- 설명… -->
- label
- 항목이 없으면 값이 전달되지 않는다!!
- 입력 항목
- cheackbox와 radio는 value 값이 꼭 있어야한다!! 그래야 선택한 값이 그대로 들어간다!!
- 입력 값
- type
- input : 입력
- → 입력 항목
- form 태그의 속성
- method → get과 post 방식은 정말 중요하고 면접질문에 많이 나온다!!!!!! , 교수님 깃허브 들어가서 lectureETC에서 웹기초 강의 보면 된다.
- get (기본값)
- → 나중에 깊이 있게 배울거다
- : 서버의 자원의 조회
- post데이터의 추가, 변경제출됨 창 뜨면 검사→ 네트워크 → 페이로드 들어가면 전송된 데이터가 보인다.
- → 면접 때 get이 뭐고 post가 뭐냐고 물어본다 신입 개발자한텐 기초적인 것을 물어본다!!!!! 제대로 공부하자!!!
- : 작성
- get (기본값)
- name
- 자바스크립트에서 많이 사용
- action : 양식 제출 경로
- target_blank - 새창_top - 가장 상위 창
- iframe name 속성
- _parent - 부모창
- : _self - 현재창
- autocomplete 속성
- 자동 완성
- on : 기본값
- off : 자동완성 사용 X
- 자동 완성
- method → get과 post 방식은 정말 중요하고 면접질문에 많이 나온다!!!!!! , 교수님 깃허브 들어가서 lectureETC에서 웹기초 강의 보면 된다.
- <label> 태그
- <fieldset>, <legend> 태그 - 폼 요소 그룹으로 묶기(그룹화 시켜서 항목별로 나눠준다
사용자 입력을 위한 <input> 태그
- <input> 태그
- <input> 태그와 type 속성에서 사용 가능한 유형
- hidden : 내부에서만 사용하는 값 서버로 전송
- text
- search
- tel
- url
- email
- 이메일 전용
- 양식 제출시 이메일 형식 체크
- password
- datetime : 날짜와 시간 - UTC 시간 기준/ 영국 시간 기준
- UTC : 영국시간
- datetime-local : 날짜와 시간 - 현재 지역의 시간 기준
- date : 날짜 → 달력이 팝업으로 노출
- month
- week
- time
- numbermin - 최소값
- max - 최대값
- : 숫자로 입력을 제한
- rangemin - 최소값
- max - 최대값
- : 범위를 지정
- color
- : 색상 - 색상표 팝업으로 노출
- checkbox
- radio
- file
- 파일 선택 버튼,
- 파일 탐색기 팝업 노출
- multiple : 파일 여러개 선택(CTRL + 여러 가지 파일
- submit
- image
- 이미지 형태 제출 버튼,
- src=”이미지 경로”
- reset
- button
<input> 태그의 다양한 속성
- autofocus 속성
- placeholder 속성
- 안내 문구
- readonly 속성
- 읽기 전용 / 변경 불가
- 데이터 전송 O
- disabled : 비활성화, 데이터 전송 배제
- required 속성 → 필수로 값이 있어야 양식이 제출된다.
- 필수 항목
- 값이 없으면 제출시 검증
- min, max, step 속성
- step : 1 → 1씩 변경
- size, minlength, maxlength 속성minlength - 최소 글자수
- maxlength - 최대 글자수
- size - 칸의 갯수
참고)
checked : radio,checkbox - 이미 체크된 상태
여러 데이터 나열해 보여 주기
- <select>, <optgroup>, <option><option value=”항목1”>항목1</option><option value=”항목3”>항목3</option>
- selected : 선택
- multiple : 여러 개 선택
- size : 갯수 만큼 여러 개 보이기
- </select>
- <option value=”항목2”>항목2</option>
- <select>
- <datalist> 태그, <option> 태그<option value=”항목1” label=”항목1명칭”></option><option value=”항목3” label=”항목3명칭”></option><input type=”text” list=”datalist 아이디값”>
- </datalist>
- <option value=”항목2” label=”항목2명칭”></option>
- <datalist id=”datalist 아이디값”>
- <textarea> 태그
- 여러줄 텍스트
- cols - 너비
- rows - 몇행
기타 다양한 폼 요소들
- <button> 태그
- type : submit(기본값), reset, button
- <output> 태그
- 결과값
- <progress> 태그
- 진행 상태
- <meter> 태그
- 수치 정도를 나타냄 → 막대 형태로https://dm.n-mk.kr/manager/login → 아이디 회원가입 여기서 많이 보고 할것이다.폼 만들기
- <form> 태그
- input : 입력
- text - 한줄 텍스트 입력
- password - 비밀번호 전용 / 입력 텍스트 감춤 처리
- radio - name 속성이 같은 여러개 중에서 한개 선택 → name 그룹당 하나만 선택 가능
- checkbox - 여러개 중에서 여러개를 선택
- submit - 양식 제출 버튼
- reset - 다시 입력 버튼button 태그 → 기본값이 submit 이라서 제출됨
reset - 다시 입력 버튼 button - 일반 버튼 → 보통 얘를 많이 쓴다. - type : submit - 제출 버튼 (기본값)
- 참고)
- label 태그를 radio, checkbox 태그를 감싸면 → 텍스트만 클릭해도 체크가 된다.
- radio, checkbox의 id 속성 값 → label 태그의 for 속성과 동일하게 연결(id와 for을 연결)
- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>회원가입</h1> <form> <dl> <dt>아이디</dt> <dd> <input type="text"> </dd> </dl> <dl> <dt>비밀번호</dt> <dd> <input type="password"> </dd> </dl> <dl> <dt>비밀번호 확인</dt> <dd> <input type="password"> </dd> </dl> <dl> <dt>회원명</dt> <dd> <input type="text"> </dd> </dl> <dl> <dt>취미</dt> <dd> <label> <input type="checkbox">취미1 </label> <label> <input type="checkbox">취미2 </label> <label> <input type="checkbox">취미3 </label> </dd> </dl> <dl> <dt>학년</dt> <dd> <input type="radio" name="grade" id="grade1"> <label for="grade1">1학년</label> <input type="radio" name="grade" id="grade2"> <label for="grade2">2학년</label> <input type="radio" name="grade" id="grade3"> <label for="grade3">3학년</label> </dd> </dl> <dl> <input type="button"> </dl> </form> </body> </html>
- <!-- 설명… -->
- label
- 항목이 없으면 값이 전달되지 않는다!!
- 입력 항목
- cheackbox와 radio는 value 값이 꼭 있어야한다!! 그래야 선택한 값이 그대로 들어간다!!
- 입력 값
- type
- input : 입력
- → 입력 항목
- form 태그의 속성
- method → get과 post 방식은 정말 중요하고 면접질문에 많이 나온다!!!!!! , 교수님 깃허브 들어가서 lectureETC에서 웹기초 강의 보면 된다.
- get (기본값)
- → 나중에 깊이 있게 배울거다
- : 서버의 자원의 조회
- post데이터의 추가, 변경제출됨 창 뜨면 검사→ 네트워크 → 페이로드 들어가면 전송된 데이터가 보인다.
- → 면접 때 get이 뭐고 post가 뭐냐고 물어본다 신입 개발자한텐 기초적인 것을 물어본다!!!!! 제대로 공부하자!!!
- : 작성
- get (기본값)
- name
- 자바스크립트에서 많이 사용
- action : 양식 제출 경로
- target_blank - 새창_top - 가장 상위 창
- iframe name 속성
- _parent - 부모창
- : _self - 현재창
- autocomplete 속성
- 자동 완성
- on : 기본값
- off : 자동완성 사용 X
- 자동 완성
- method → get과 post 방식은 정말 중요하고 면접질문에 많이 나온다!!!!!! , 교수님 깃허브 들어가서 lectureETC에서 웹기초 강의 보면 된다.
- <label> 태그
- <fieldset>, <legend> 태그 - 폼 요소 그룹으로 묶기(그룹화 시켜서 항목별로 나눠준다
- <input> 태그
- <input> 태그와 type 속성에서 사용 가능한 유형
- hidden : 내부에서만 사용하는 값 서버로 전송
- text
- search
- tel
- url
- email
- 이메일 전용
- 양식 제출시 이메일 형식 체크
- password
- datetime : 날짜와 시간 - UTC 시간 기준/ 영국 시간 기준
- UTC : 영국시간
- datetime-local : 날짜와 시간 - 현재 지역의 시간 기준
- date : 날짜 → 달력이 팝업으로 노출
- month
- week
- time
- numbermin - 최소값
- max - 최대값
- : 숫자로 입력을 제한
- rangemin - 최소값
- max - 최대값
- : 범위를 지정
- color
- : 색상 - 색상표 팝업으로 노출
- checkbox
- radio
- file
- 파일 선택 버튼,
- 파일 탐색기 팝업 노출
- multiple : 파일 여러개 선택(CTRL + 여러 가지 파일
- submit
- image
- 이미지 형태 제출 버튼,
- src=”이미지 경로”
- reset
- button
- autofocus 속성
- placeholder 속성
- 안내 문구
- readonly 속성
- 읽기 전용 / 변경 불가
- 데이터 전송 O
- disabled : 비활성화, 데이터 전송 배제
- required 속성 → 필수로 값이 있어야 양식이 제출된다.
- 필수 항목
- 값이 없으면 제출시 검증
- min, max, step 속성
- step : 1 → 1씩 변경
- size, minlength, maxlength 속성minlength - 최소 글자수
- maxlength - 최대 글자수
- size - 칸의 갯수
- <select>, <optgroup>, <option><option value=”항목1”>항목1</option><option value=”항목3”>항목3</option>
- selected : 선택
- multiple : 여러 개 선택
- size : 갯수 만큼 여러 개 보이기
- </select>
- <option value=”항목2”>항목2</option>
- <select>
- <datalist> 태그, <option> 태그<option value=”항목1” label=”항목1명칭”></option><option value=”항목3” label=”항목3명칭”></option><input type=”text” list=”datalist 아이디값”>
- </datalist>
- <option value=”항목2” label=”항목2명칭”></option>
- <datalist id=”datalist 아이디값”>
- <textarea> 태그
- 여러줄 텍스트
- cols - 너비
- rows - 몇행
- <button> 태그
- type : submit(기본값), reset, button
- <output> 태그
- 결과값
- <progress> 태그
- 진행 상태
- <meter> 태그
- 수치 정도를 나타냄 → 막대 형태로https://dm.n-mk.kr/manager/login → 아이디 회원가입 여기서 많이 보고 할것이다.폼 만들기
- <form> 태그
- input : 입력
- text - 한줄 텍스트 입력
- password - 비밀번호 전용 / 입력 텍스트 감춤 처리
- radio - name 속성이 같은 여러개 중에서 한개 선택 → name 그룹당 하나만 선택 가능
- checkbox - 여러개 중에서 여러개를 선택
- submit - 양식 제출 버튼
- reset - 다시 입력 버튼button 태그 → 기본값이 submit 이라서 제출됨
reset - 다시 입력 버튼 button - 일반 버튼 → 보통 얘를 많이 쓴다. - type : submit - 제출 버튼 (기본값)
- 참고)
- label 태그를 radio, checkbox 태그를 감싸면 → 텍스트만 클릭해도 체크가 된다.
- radio, checkbox의 id 속성 값 → label 태그의 for 속성과 동일하게 연결(id와 for을 연결)
- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>회원가입</h1> <form> <dl> <dt>아이디</dt> <dd> <input type="text"> </dd> </dl> <dl> <dt>비밀번호</dt> <dd> <input type="password"> </dd> </dl> <dl> <dt>비밀번호 확인</dt> <dd> <input type="password"> </dd> </dl> <dl> <dt>회원명</dt> <dd> <input type="text"> </dd> </dl> <dl> <dt>취미</dt> <dd> <label> <input type="checkbox">취미1 </label> <label> <input type="checkbox">취미2 </label> <label> <input type="checkbox">취미3 </label> </dd> </dl> <dl> <dt>학년</dt> <dd> <input type="radio" name="grade" id="grade1"> <label for="grade1">1학년</label> <input type="radio" name="grade" id="grade2"> <label for="grade2">2학년</label> <input type="radio" name="grade" id="grade3"> <label for="grade3">3학년</label> </dd> </dl> <dl> <input type="button"> </dl> </form> </body> </html>
- <!-- 설명… -->
- label
- 항목이 없으면 값이 전달되지 않는다!!
- 입력 항목
- cheackbox와 radio는 value 값이 꼭 있어야한다!! 그래야 선택한 값이 그대로 들어간다!!
- 입력 값
- type
- input : 입력
- → 입력 항목
- form 태그의 속성
- method → get과 post 방식은 정말 중요하고 면접질문에 많이 나온다!!!!!! , 교수님 깃허브 들어가서 lectureETC에서 웹기초 강의 보면 된다.
- get (기본값)
- → 나중에 깊이 있게 배울거다
- : 서버의 자원의 조회
- post데이터의 추가, 변경제출됨 창 뜨면 검사→ 네트워크 → 페이로드 들어가면 전송된 데이터가 보인다.
- → 면접 때 get이 뭐고 post가 뭐냐고 물어본다 신입 개발자한텐 기초적인 것을 물어본다!!!!! 제대로 공부하자!!!
- : 작성
- get (기본값)
- name
- 자바스크립트에서 많이 사용
- action : 양식 제출 경로
- target_blank - 새창_top - 가장 상위 창
- iframe name 속성
- _parent - 부모창
- : _self - 현재창
- autocomplete 속성
- 자동 완성
- on : 기본값
- off : 자동완성 사용 X
- 자동 완성
- method → get과 post 방식은 정말 중요하고 면접질문에 많이 나온다!!!!!! , 교수님 깃허브 들어가서 lectureETC에서 웹기초 강의 보면 된다.
- <label> 태그
- <fieldset>, <legend> 태그 - 폼 요소 그룹으로 묶기(그룹화 시켜서 항목별로 나눠준다
- <input> 태그
- <input> 태그와 type 속성에서 사용 가능한 유형
- hidden : 내부에서만 사용하는 값 서버로 전송
- text
- search
- tel
- url
- email
- 이메일 전용
- 양식 제출시 이메일 형식 체크
- password
- datetime : 날짜와 시간 - UTC 시간 기준/ 영국 시간 기준
- UTC : 영국시간
- datetime-local : 날짜와 시간 - 현재 지역의 시간 기준
- date : 날짜 → 달력이 팝업으로 노출
- month
- week
- time
- numbermin - 최소값
- max - 최대값
- : 숫자로 입력을 제한
- rangemin - 최소값
- max - 최대값
- : 범위를 지정
- color
- : 색상 - 색상표 팝업으로 노출
- checkbox
- radio
- file
- 파일 선택 버튼,
- 파일 탐색기 팝업 노출
- multiple : 파일 여러개 선택(CTRL + 여러 가지 파일
- submit
- image
- 이미지 형태 제출 버튼,
- src=”이미지 경로”
- reset
- button
- autofocus 속성
- placeholder 속성
- 안내 문구
- readonly 속성
- 읽기 전용 / 변경 불가
- 데이터 전송 O
- disabled : 비활성화, 데이터 전송 배제
- required 속성 → 필수로 값이 있어야 양식이 제출된다.
- 필수 항목
- 값이 없으면 제출시 검증
- min, max, step 속성
- step : 1 → 1씩 변경
- size, minlength, maxlength 속성minlength - 최소 글자수
- maxlength - 최대 글자수
- size - 칸의 갯수
- <select>, <optgroup>, <option><option value=”항목1”>항목1</option><option value=”항목3”>항목3</option>
- selected : 선택
- multiple : 여러 개 선택
- size : 갯수 만큼 여러 개 보이기
- </select>
- <option value=”항목2”>항목2</option>
- <select>
- <datalist> 태그, <option> 태그<option value=”항목1” label=”항목1명칭”></option><option value=”항목3” label=”항목3명칭”></option><input type=”text” list=”datalist 아이디값”>
- </datalist>
- <option value=”항목2” label=”항목2명칭”></option>
- <datalist id=”datalist 아이디값”>
- <textarea> 태그
- 여러줄 텍스트
- cols - 너비
- rows - 몇행
- <button> 태그
- type : submit(기본값), reset, button
- <output> 태그
- 결과값
- <progress> 태그
- 진행 상태
- <meter> 태그
- 수치 정도를 나타냄 → 막대 형태로https://dm.n-mk.kr/manager/login → 아이디 회원가입 여기서 많이 보고 할것이다.폼 만들기
- <form> 태그
- input : 입력
- text - 한줄 텍스트 입력
- password - 비밀번호 전용 / 입력 텍스트 감춤 처리
- radio - name 속성이 같은 여러개 중에서 한개 선택 → name 그룹당 하나만 선택 가능
- checkbox - 여러개 중에서 여러개를 선택
- submit - 양식 제출 버튼
- reset - 다시 입력 버튼button 태그 → 기본값이 submit 이라서 제출됨
reset - 다시 입력 버튼 button - 일반 버튼 → 보통 얘를 많이 쓴다. - type : submit - 제출 버튼 (기본값)
- 참고)
- label 태그를 radio, checkbox 태그를 감싸면 → 텍스트만 클릭해도 체크가 된다.
- radio, checkbox의 id 속성 값 → label 태그의 for 속성과 동일하게 연결(id와 for을 연결)
- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>회원가입</h1> <form> <dl> <dt>아이디</dt> <dd> <input type="text"> </dd> </dl> <dl> <dt>비밀번호</dt> <dd> <input type="password"> </dd> </dl> <dl> <dt>비밀번호 확인</dt> <dd> <input type="password"> </dd> </dl> <dl> <dt>회원명</dt> <dd> <input type="text"> </dd> </dl> <dl> <dt>취미</dt> <dd> <label> <input type="checkbox">취미1 </label> <label> <input type="checkbox">취미2 </label> <label> <input type="checkbox">취미3 </label> </dd> </dl> <dl> <dt>학년</dt> <dd> <input type="radio" name="grade" id="grade1"> <label for="grade1">1학년</label> <input type="radio" name="grade" id="grade2"> <label for="grade2">2학년</label> <input type="radio" name="grade" id="grade3"> <label for="grade3">3학년</label> </dd> </dl> <dl> <input type="button"> </dl> </form> </body> </html>
- <!-- 설명… -->
- label
- 항목이 없으면 값이 전달되지 않는다!!
- 입력 항목
- cheackbox와 radio는 value 값이 꼭 있어야한다!! 그래야 선택한 값이 그대로 들어간다!!
- 입력 값
- type
- input : 입력
- → 입력 항목
- form 태그의 속성
- method → get과 post 방식은 정말 중요하고 면접질문에 많이 나온다!!!!!! , 교수님 깃허브 들어가서 lectureETC에서 웹기초 강의 보면 된다.
- get (기본값)
- → 나중에 깊이 있게 배울거다
- : 서버의 자원의 조회
- post데이터의 추가, 변경제출됨 창 뜨면 검사→ 네트워크 → 페이로드 들어가면 전송된 데이터가 보인다.
- → 면접 때 get이 뭐고 post가 뭐냐고 물어본다 신입 개발자한텐 기초적인 것을 물어본다!!!!! 제대로 공부하자!!!
- : 작성
- get (기본값)
- name
- 자바스크립트에서 많이 사용
- action : 양식 제출 경로
- target_blank - 새창_top - 가장 상위 창
- iframe name 속성
- _parent - 부모창
- : _self - 현재창
- autocomplete 속성
- 자동 완성
- on : 기본값
- off : 자동완성 사용 X
- 자동 완성
- method → get과 post 방식은 정말 중요하고 면접질문에 많이 나온다!!!!!! , 교수님 깃허브 들어가서 lectureETC에서 웹기초 강의 보면 된다.
- <label> 태그
- <fieldset>, <legend> 태그 - 폼 요소 그룹으로 묶기(그룹화 시켜서 항목별로 나눠준다
- <input> 태그
- <input> 태그와 type 속성에서 사용 가능한 유형
- hidden : 내부에서만 사용하는 값 서버로 전송
- text
- search
- tel
- url
- email
- 이메일 전용
- 양식 제출시 이메일 형식 체크
- password
- datetime : 날짜와 시간 - UTC 시간 기준/ 영국 시간 기준
- UTC : 영국시간
- datetime-local : 날짜와 시간 - 현재 지역의 시간 기준
- date : 날짜 → 달력이 팝업으로 노출
- month
- week
- time
- numbermin - 최소값
- max - 최대값
- : 숫자로 입력을 제한
- rangemin - 최소값
- max - 최대값
- : 범위를 지정
- color
- : 색상 - 색상표 팝업으로 노출
- checkbox
- radio
- file
- 파일 선택 버튼,
- 파일 탐색기 팝업 노출
- multiple : 파일 여러개 선택(CTRL + 여러 가지 파일
- submit
- image
- 이미지 형태 제출 버튼,
- src=”이미지 경로”
- reset
- button
- autofocus 속성
- placeholder 속성
- 안내 문구
- readonly 속성
- 읽기 전용 / 변경 불가
- 데이터 전송 O
- disabled : 비활성화, 데이터 전송 배제
- required 속성 → 필수로 값이 있어야 양식이 제출된다.
- 필수 항목
- 값이 없으면 제출시 검증
- min, max, step 속성
- step : 1 → 1씩 변경
- size, minlength, maxlength 속성minlength - 최소 글자수
- maxlength - 최대 글자수
- size - 칸의 갯수
- <select>, <optgroup>, <option><option value=”항목1”>항목1</option><option value=”항목3”>항목3</option>
- selected : 선택
- multiple : 여러 개 선택
- size : 갯수 만큼 여러 개 보이기
- </select>
- <option value=”항목2”>항목2</option>
- <select>
- <datalist> 태그, <option> 태그<option value=”항목1” label=”항목1명칭”></option><option value=”항목3” label=”항목3명칭”></option><input type=”text” list=”datalist 아이디값”>
- </datalist>
- <option value=”항목2” label=”항목2명칭”></option>
- <datalist id=”datalist 아이디값”>
- <textarea> 태그
- 여러줄 텍스트
- cols - 너비
- rows - 몇행
- <button> 태그
- type : submit(기본값), reset, button
- <output> 태그
- 결과값
- <progress> 태그
- 진행 상태
- <meter> 태그
- 수치 정도를 나타냄 → 막대 형태로
- <form> 태그
- checked : radio,checkbox - 이미 체크된 상태
- 양식
- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body></body> </html>
- <form> 태그
- checked : radio,checkbox - 이미 체크된 상태
- 양식
- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body></body> </html>
- <form> 태그
- checked : radio,checkbox - 이미 체크된 상태
- 양식
- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body></body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>회원가입</h1>
<form name="frm" method="post" action="ex02.html" autocomplete="off"> <!--안에 순서들은 상관없다 그치만 method는 앞에 두는 편!-->
<input type="hidden" name="mode" value="join"> <!--hidden : 실제로 노출 안 됨 보이지 않는데 전송을 위한 형태로 쓰인다, 내부에서만 사용하는 값 서버로 전송 -->
<fieldset> <!--그룹화 지어서 항목별로 나눠준다-->
<legend>일반 정보</legend>
<dl>
<dt>아이디</dt>
<dd>
<input type="text" name="userId" autofocus placeholder="아이디" required minlength="6"> <!--반드시 name이 있어야 전송이 가능하다!!!-->
</dd>
</dl>
<dl>
<dt>비밀번호</dt>
<dd>
<input type="password" name="userPw" placeholder="비밀번호" required minlength="8">
</dd>
</dl>
<dl>
<dt>비밀번호 확인</dt>
<dd>
<input type="password" name="confirmPw" placeholder="비밀번호 확인" required>
</dd>
</dl>
<dl>
<dt>회원명</dt>
<dd>
<input type="text" name="userNm" value="사용자01" disabled>
</dd>
</dl>
<dl>
<dt>이메일</dt>
<dd>
<input type="email" name="email">
</dd>
</dl>
<dl>
<dt>생년월일</dt>
<dd>
<input type="date" name="birthDt">
</dd>
</dl>
<dl>
<dt>프로필 이미지</dt>
<dd>
<input type="file" name="profile"multiple>
</dd>
</dl>
<dl>
<dt>취미</dt>
<dd>
<label>
<input type="checkbox" name="hobby" value="취미1">취미1
</label>
<label>
<input type="checkbox" name="hobby" value="취미2">취미2
</label>
<label>
<input type="checkbox" name="hobby" value="취미3">취미3 <!-- cheackbox와 radio는 범주화 시켜야해서 name을 같게 쓴다-->
</label>
</dd>
</dl>
<dl>
<dt>지역</dt>
<dd>
<datalist id="locations"> <!--아래 input에 들어간다.-->
<option value="서울특별시" label="서울"></option>
<option value="경기도" label="경기"></option>
<option value="인천광역시" label="인천"></option>
</datalist>
<input type="text" name="location" list="locations"> <!--위에 datalist id"locations에서 가져온다.-->
</dd>
</dl>
<dl>
<dt>자기소개</dt>
<dd>
<textarea name="introduction" rows="10" cols="30"></textarea>
</dd>
</dl>
</fieldset>
<fieldset>
<legend>학교 정보</legend>
<dl>
<dd>
<select name="major">
<optgroup label="공과대학">
<option value="컴퓨터공학">컴퓨터공학</option>
<option value="기계공학과">기계공학과</option>
</optgroup>
<optgroup label="인문대학">
<option value="영어영문학과" selected>영어영문학과</option>
<option value="철학과">철학과</option>
</optgroup>
</select>
</dd>
</dl>
<dl>
<dt>학년</dt>
<dd>
<input type="radio" name="grade" id="grade1" value="1" checked>
<label for="grade1">1학년</label>
<input type="radio" name="grade" id="grade2" value="2">
<label for="grade2">2학년</label>
<input type="radio" name="grade" id="grade3" value="3">
<label for="grade3">3학년</label>
</dd>
</dl>
</fieldset>
<dl>
<!--
<input type="reset" value="다시입력">
<input type="submit" value="가입하기">
-->
<button type="reset">다시입력</button>
<button type="submit">가입하기</button>
</dl>
</form>
<progress max="100" value="70"></progress>
</body>
</html>
'WEB > HTML5+CSS3' 카테고리의 다른 글
| 6. 텍스트 관련 스타일(HTML5+CSS3) (2) | 2024.03.26 |
|---|---|
| 5. CSS 기초(HTML5_CSS3) (0) | 2024.03.25 |
| 3. 이미지와 하이퍼링크(HTTP5+CSS3) (0) | 2024.03.21 |
| 2. 텍스트 관련 태그들(HTML5+CSS3) (0) | 2024.03.20 |
| 1. HTML기본 다지기(HTML5+CSS3) (0) | 2024.03.19 |
