2018.12.05 달력&체크박스&라디오&외부 이미지
2018. 12. 5. 16:33ㆍHTML5&CSS
#1 Merterial 디자인(외부링크에서 가져오기)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Merterial 디자인</title>
<link rel="stylesheet" href="css/style.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="box1"></div>
<a href="#">
<i class="material-icons" style="font-size:60px">cloud_queue</i>
</a>
</body>
</html>
#2 체크리스트 내용 전송하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>체크 박스</title>
</head>
<body>
<h3>먹고 싶은 것 모두 체크하세요.</h3>
<hr/>
<form action="Index.html">
짜장면 <input type="checkbox" name="ja" value="1" checked/>
짬뽕 <input type="checkbox" name="jjam" value="1"/>
탕수육 <input type="checkbox" name="tang" value="1"/>
<input type="submit" value="전송"/>
</form>
</body>
</html>
▼체크한 내용을 전송을 클릭시 전송 ▼
#3 라디오에 이미지 삽입하기( 한 항목만 체크 가능하게)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>라디오 버튼</title>
</head>
<body>
<!-- 사진을 클릭해도 박스에 체크가 될 수 있게, 하나만 선택가능 -->
<form action="">
<label>
<input type="radio" name="china"/> 짜장면
<img src="media/jajang.png"><br/>
</label>
<label>
<input type="radio" name="china"/> 짬뽕
<img src="media/jjambbong.png"><br/>
</label>
<label>
<input type="radio" name="china"/> 탕수육
<img src="media/tangsuyuk.png"><br/>
</label>
</form>
<label>
</body>
</html>
#4 달력만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>달력 만들기</title>
</head>
<body>
<form>
<input type="month" value="2018-12">
</form>
</body>
</html>
'HTML5&CSS' 카테고리의 다른 글
| 회원가입 화면 만들기 (0) | 2018.12.05 |
|---|---|
| 2018.12.05 메뉴디자인하기 (0) | 2018.12.05 |
| 2018.12.04 로그인폼,텍스트 입력창,버튼 (0) | 2018.12.04 |
| .vscode 설정후 Ctrl + Shift + B 실행하기 (0) | 2018.12.04 |
| 2018.12.03 화면배치(overflow,margin사용) (0) | 2018.12.03 |