오늘은 html배운지 5일되는날
오늘 아주 재밌는걸 배웠다
바로 회원 가입 양식이다
코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<form>
이름 : <input type="text"><br>
나이 : <input type="text"><br>
id : <input type="text"><br>
비밀번호 : <input type="password"><br>
개인정보 : <input type="radio" name="info" checked>공개
<input type="radio" name="info">비공개<br>
성별 : <input type="radio" name="sex">여자
<input type="radio" name="sex">남자<br>
<!-- 체크박스 여러개 선택 주석(설명물) -->
취미 : <input type="checkbox" name="hobby1"> 댄스
<input type="checkbox" name="hobby2">독서
<input type="checkbox" name="hobby3"> 영화감상
<input type="checkbox" name="hobby4"> 드라마보기 <br>
<!-- 선택박스 여러개중선택 주석(설명물) -->
이메일 : <input type="text">@
<select>
<option>선택</option>
<option>naver.com</option>
<option>e-mirim.hs.kr</option>
<option>gmail.com</option>
</select><br>
<!-- 여러줄 입력 주석(설명물) -->
자기소개 : <textarea rows="5" cols="80"></textarea>
<!-- 버튼 입력 주석(설명물) -->
<button type="button">검색</button><br>
<button type="submit">확인</button><br>
<button type="rest">다시 쓰기</button><br>
<!-- 파일 선택 창(설명물) -->
파일 첨부 : <input type="file"> 2MB까지 가능 <br>
색상 선택 : <input type="color"><br>
날짜 시간 선택 : <input type="datetime-local"> <br>
숫자 선택 : <input type="number"><br>
슬라이더값선택 : <input type="range"><br>
시간선택 : <input type="time"><br>
년도 주 선택 : <input type="week"><br>
</form>
</body>
</html>짜잔!
두번째는 테스트로 혼자서 만들어 보았다
뭔가 적을게 많다 보니깐 헷갈리고
틀리는 부분이 많았지만
앞에 배운 것을 보고 계속 하다보니깐
원하는 결과가 나오긴 했다!
나중에는 보지 않고 외워서 하는 날이 오면 좋겠다 ㅎㅎ
그럼 열심히 복습을 하러 ~!
코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<h3>회원 가입 양식</h3>
<form>
-아이디 : <input type="text"><br>
-비밀번호 : <input type="text"><br>
-비밀번호 확인 : <input type="text"><br>
-이름 : <input type="text"> <br>
-성별 : <input type="radio" name="sex" checked>여성
<input type="radio" name="sex"> 남성 <br>
-전화번호 :
<select>
<option>02</option>
<option>010</option>
<option>016</option>
</select>
- <input type="text">
- <input type="text"><br>
-이메일 : <input type="text">@
<select>
<option>naver.com</option>
<option>gmail.com</option>
</select><br>
-자기소개 : <textarea rows="5" cols="80"></textarea><br>
<button type="submit">확인</button>
<button type="rest">취소</button>
</form>
'AfterSchool > html 방과후' 카테고리의 다른 글
| CSS : 웹페이지 꾸미기(0405) (0) | 2022.04.05 |
|---|---|
| CSS : style 배우기(0401) (0) | 2022.04.01 |
| html: 영상넣기, 테이블 만들기(0324) (0) | 2022.03.24 |
| html: 이미지 태그 알아보기(0323) (0) | 2022.03.23 |
| html: 문자크기, 링크이동, 띄어쓰기, 단락, 목록(0317) (2) | 2022.03.17 |
