라라리라
2023.07.21 / HTML 4- 코딩 2 일차 본문
0401_버튼.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>버튼예제 </h1>
<form >
<input type="button" value="새 탭 열기" onclick="window.open()">
<input type="button" value="메세지" onclick="alert('input alert')">
<hr>
<button onclick="window.open()">새 탭 열기</button>
<button onclick="alert('button alert')">메세지</button>
</form>
<!--
사용자가 버튼을 누르거나 내용을 입력하는것을 form 이라고 한다.
<form></form> 으로 감싸고 그안에 input 을 사용한다.
현재 form 태그 자체는 아무기능이 없다. 추후에 배운다.
-->
<br>
<br>
<br>
<hr>
<form>
<input type="button" value="집에 가기" onclick="window.open()">
<input type="button" value="카카오톡" onclick="alert('네트워크 확인')">
<hr>
<button onclick="window.open()">페이스북</button>
<button onclick="alert('button alert')">메세지</button>
<br>
<br>
<br>
<br>
<hr>
<form>
<input type ="button" value ="새 탭 열기" onclick="window.open()">
<input type ="button" value = "메세지" onclick="alert('input alert')">
<hr>
<button onclick = "window.open()">페이스북</button>
<button onclick = "alert('button alert')">메세지</button>
</form>
</form>
</body>
</html>
버튼예제
0402_체크박스.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>체크박스 예제</h1>
<form>
과일 선택:
<input type="checkbox">Apple
<input type="checkbox">Grape
<input type="checkbox">Orange
<h1>체크박스 예제(미리 선택해놓기)</h1>
과목 선택:
<input type="checkbox" checked >국어
<input type="checkbox" >수학
<input type="checkbox">영어
</form>
<br>
<br>
<br>
<br>
<hr>
<p><h1>체크박스 예제</h1></p>
<input type ="checkbox">Apple
<input type ="checkbox">Grape
<input type ="checkbox">Orange
<h1>체크박스 예제(미리 선택해놓기)
</h1>
<input type ="checkbox" checked>국어
<input type ="checkbox">수학
<input type ="checkbox">영어
</body>
</html>
체크박스 예제
체크박스 예제
Apple Grape Orange체크박스 예제(미리 선택해놓기)
국어 수학 영어
0403_라디오.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>라디오 예제</h1>
<form>
성별:
<input type="radio" >남성
<input type="radio" >여성
<h1>라디오 예제(미리선택 해놓기)</h1>
성별:
<input type="radio" checked>남성
<input type="radio" >여성
</form>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<h1>라디오 예제</h1>
<form>
성별:
<input type ="radio"> 남성
<input type ="radio"> 여성
<h1>라디오 예제(미리선택 해놓기)</h1>
<input type = "radio" checked> 남성
<input type = "radio" > 여성
</form>
</body>
</html>
라디오 예제
라디오 예제
0404_셀렉트.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>셀렉트 예제</h1>
<form>
<select>
<option value="bmw">BMW</option>
<option value="benz">Benz</option>
<option value="hyundai">현대자동차</option>
<option value="kia">기아자동차</option>
</select>
<h1>셀렉트 예제(미리선택 해놓기)</h1>
<select>
<option value="bmw">BMW</option>
<option value="benz">Benz</option>
<option value="hyundai" selected>현대자동차</option>
<option value="kia">기아자동차</option>
</select>
</form>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<h1>셀렉트 예제</h1>
<form>
<select>
<option type="bmw">BMW</option>
<option type="benz">Benz</option>
<option type="hyn">현대자동차</option>
<option type="kia">기아자동차</option>
</select>
<h1>셀렉트 예제(미리선택 해놓기)</h1>
<select>
<option type="bmw">BMW</option>
<option type="benz">Benz</option>
<option type="hyn" selected>현대자동차</option>
<option type="kia">기아자동차</option>
</select>
</form>
</body>
</html>
셀렉트 예제
셀렉트 예제
0405_텍스트에리어.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>textarea 예제</h1>
<form>
<textarea rows="10" cols="50" name="memo" placeholder="메모를 작성하세요."></textarea><br>
</form>
<br>
<br>
<br>
<br>
<br>
<hr>
<h1>textarea 예제</h1>
<form>
<textarea row="10" cols="50" name="메모" placeholder="여기 메모" ></textarea><br>
</form>
</body>
</html>
textarea 예제
textarea 예제
0406_인풋태그와폼1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
아이디 : <input type="text" name="id" placeholder="아이디"> <br>
비밀번호 : <input type="text" name="pw" placeholder="비밀번호"> <br>
이름 : <input type="text" name="name" placeholder="이름"> <br>
<input type="submit" value="회원가입">
</form>
<!--
form태그 : 사용자로부터 입력한 데이터를
다른 페이지로 전송할 때 필요한 태그
-->
<!--
placeholder 속성을 통해
사용자에게 입력 창에 입력해야할 내용에 대해 설명해줄 수 있다.
-->
<!--
아래 3가지 기능은 추후에 배운다. 지금은 모습에 익숙해진다.
[1] form 의 action
[2] input 의 name
[3] input 의 submit
-->
<h1>인풋태그와 폼</h1>
<form action="#">
아이디 : <input type="text" name="id" placeholder="아이디"> <br>
비밀번호 : <input type="text" name="pw" placeholder="비밀번호"> <br>
아이디 : <input type="text" name="name" placeholder="이름"> <br>
<input type="submit" value="회원가입">
</form>
</body>
</html>
인풋태그와 폼
0407_인풋태그와폼2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
name 속성은
사용자가 입력한 값(value)에
변수명을 짓는 개념이다.
-->
<form action="#">
아이디 : <input type="text" name="id"> <br>
비밀번호 : <input type="password" name="pw"> <br>
수강과목 :
<input type="checkbox" name="subject" value="java">JAVA
<input type="checkbox" name="subject" value="jsp">JSP
<input type="checkbox" name="subject" value="spring">Spring <br>
성별 :
<input type="radio" name="gender" value="man">남성
<input type="radio" name="gender" value="woman">여성 <br>
관심분야 :
<select name="study">
<option value="frontend">프론트엔드</option>
<option value="backend">벡엔드</option>
<option value="publisher">퍼블리셔</option>
<option value="database">데이터베이스</option>
</select>
<br>
<textarea rows="10" cols="50" name="memo" placeholder="메모를 작성하세요."></textarea><br>
<input type="submit" value="회원가입">
</form>
<!--
아래 3가지 기능은 추후에 배운다. 지금은 모습에 익숙해진다.
[1] form 의 action
[2] input 의 name
[3] input 의 submit
-->
<h1>인풋태그와 폼2</h1>
<form action="#">
아이디 : <input type="text" name="id" placeholder="아이디"> <br>
비밀번호 : <input type="password" name="pw" placeholder="비밀번호"> <br>
수강과목 :
<input type="checkbox" name="subject" value="java">JAVA
<input type="checkbox" name="subject" value="jsp">JSP
<input type="checkbox" name="subject" value="spring">Spring <br>
성별 :
<input type="radio" name="gender" value="male">남성
<input type="radio" name="gender" value="female">여성 <br>
관심분야 :
<select name = "study">
<option value ="frontend">프론트엔드</option>
<option value ="backend">백엔드</option>
<option value ="publisher">퍼블리셔</option>
<option value ="database">데이터베이스</option>
</select>
<br>
<textarea rows="10" cols="50" name="memo" placeholder="메모를 작성하세요."></textarea><br>
<input type="submit" value ="회원가입">
</form>
</body>
</html>
인풋태그와 폼2
0407_인풋태그와폼3.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
div : division
화면을 분할해 구조화할 때사용한다.
-->
<div align="center">
<h1>회원가입</h1>
<form action="#">
<table border="1">
<tr>
<td>아이디</td>
<td>
<input type="text" name="id" placeholder="아이디를 입력하세요.">
</td>
</tr>
<tr>
<td>비밀번호</td>
<td>
<input type="password" name="pw1" placeholder="비밀번호를 입력하세요.">
</td>
</tr>
<tr>
<td>비밀번호 확인</td>
<td>
<input type="password" name="pw2">
</td>
</tr>
<tr>
<td>이메일</td>
<!--
email속성은 입력한 데이터가 이메일 형식을 갖췄는지 검사를 해
경고 메세지를 출력해준다.
-->
<td>
<input type="email" name="email">
</td>
</tr>
<tr>
<td>성별</td>
<td>
남성<input type="radio" name="gender" value="male">
여성<input type="radio" name="gender" value="female">
</td>
</tr>
<tr>
<td>수강과목</td>
<td>
Java<input type="checkbox" name="subject" value="java">
JSP<input type="checkbox" name="subject" value="jsp">
Spring<input type="checkbox" name="subject" value="spring">
</td>
</tr>
<tr>
<td>관심분야</td>
<td>
<select name="study">
<option value="frontend">프론트엔드</option>
<option value="backend">벡엔드</option>
<option value="publisher">퍼블리셔</option>
<option value="database">데이터베이스</option>
</select>
<br>
</td>
</tr>
<tr>
<td>메모</td>
<td>
<textarea rows="5" cols="50" name="memo"></textarea>
</td>
</tr>
<tr align="center">
<td colspan="2" >
<!--
submit버튼을 클릭하면
form태그의 action속성에 작성한 페이지로 이동한다.
-->
<input type="submit" value="가입하기">
<input type="reset" value="다시작성">
</td>
</tr>
</table>
</form>
</div>
<div align="center">
<h1>회원가입</h1>
<form action="#">
<table border="1">
<tr>
<td>아이디</td>
<td><input type="text" name="id" placeholder="아이디를 입력하세요."></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="pw" placeholder="비밀번호를 입력하세요."></td>
</tr>
<tr>
<td>비밀번호 확인</td>
<td><input type="password" name="pw2" placeholder="비밀번호를 다시 입력하세요."></td>
</tr>
<tr>
<td>이메일</td>
<td><input type="email" name="email" placeholder="이메일을 입력하세요."></td>
</tr>
<tr>
<td>성별</td>
<td>남성<input type="radio" name="gender" value="male">
여성<input type="radio" name="gender" value="female"></td>
</tr>
<tr>
<td>수강과목</td>
<td><input type="checkbox" name="subject" value="java">Java
<input type="checkbox" name="subject" value="jsp">JSP
<input type="checkbox" name="subject" value="spring">Spring
</td>
</tr>
<tr>
<td>관심분야</td>
<td><select name="study">
<option value="frontend">프론트엔드</option>
<option value="backend">백엔드</option>
<option value="publisher">퍼블리셔</option>
<option value="database">데이터베이스</option>
</select></td>
</tr>
<tr>
<td>메모</td>
<td><textarea rows="10" cols="50" name="meno" placeholder="메모를 입력하세요."></textarea></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="가입하기">
<input type="reset" value="다시작성">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
회원가입
회원가입
0408_레이블.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
label for
[1] label 과 for 를 사용해서 라디오버튼이 아닌 글자를 클릭해도 라디오버튼이 선택된다.
-->
<form action="#">
여러분의 나이대를 골라보세요.<br>
<input type="radio" name="ages" id="teen" value="teenage">
<label for="teen">10대</label><br>
<input type="radio" name="ages" id="twenty" value="twenties">
<label for="twenty">20대</label><br>
<input type="radio" name="ages" id="thirty" value="thirties">
<label for="thirty">30대</label><br>
<input type="radio" name="ages" id="forty" value="forties">
<label for="forty">40대 이상</label><br>
<input type="submit">
</form>
<div align="center">
<h1>레이블</h1>
여러분의 나이대를 골라보세요.<br>
<input type="radio" name="age" value="10" id="10;">
<label for="10;">10대</label><br>
<input type="radio" name="age" value="20" id="20;">
<label for="20;">20대</label><br>
<input type="radio" name="age" value="30" id="30;">
<label for="30;">30대</label><br>
<input type="radio" name="age" value="40" id="40;">
<label for="40;">40대</label><br>
<input type="submit" value="제출">
</div>
</body>
</html>
레이블
여러분의 나이대를 골라보세요.
0409_기타기능.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
신발사이즈 <input type="number" min="230" max="290" step="10" value="260">
<hr>
테니스 스킬 <input type="range" min="1" max="10" value="1">
<hr>
색상선택: <input type="color">
<hr>
생일 <input type="date">
<hr>
시작시간 <input type="time">
<hr>
파일업로드
<input type="file" id = "user_profile" accept="image/*, video/*" required placeholder="프로필사진" />
</body>
</html>
테니스 스킬
색상선택:
생일
시작시간
파일업로드
0410_레이블폼.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
회원가입
</h1>
<!-- label for 를 사용하면 글자를 클릭해도 input 태그의 커서가 선택된다. -->
<form action="#" >
<label for="user_name">이름</label>
<input type="text" id="user_name" required placeholder="이름"/>
<br/>
<label for="user_id">아이디</label>
<input type="text" id="user_id" required placeholder="아이디" minlength="6" maxlength="15"/>
<br/>
<label for="user_password">비밀번호</label>
<input type="password" id = "user_password" required placeholder="비밀번호" minlength="6" maxlength="15"/>
<br/>
<label for="user_email">이메일</label>
<input type="email" id = "user_email" required placeholder="이메일"/>
<br/>
<label for="user_number">전화번호</label>
<input type="tel" id = "user_number" required placeholder="전화번호 (***-****-****)" pattern="[0-1]{3}-[0-9]{4}-[0-9]{4}" />
<br/>
<label for="user_profile">프로필 사진</label>
<input type="file" id = "user_profile" accept="image/*, video/*" required placeholder="프로필사진" />
<input type="submit" value="제출">
</form>
<h1>회원가입</h1>
<label for="이름">이름</label>
<input type="text" id="이름" required placeholder="이름"><br>
<label for="아이디">아이디</label>
<input type="text" id="아이디" required placeholder="아이디" minlength="6" maxlength="10"><br>
<label for="패스워드">패스워드</label>
<input type="password" id="패스워드" required placeholder="비밀번호" minlength="6" maxlength="15"><br>
<label for="이메일">이메일</label>
<input type="email" id="이메일" required placeholder="이메일"><br>
<label for="번호">전화번호</label>
<input type="tel" id="번호" required placeholder="전화번호(***-****-****)" pattern="[0-1]{3}-[0-9]{4}-[0-9]{4}"><br>
<label for="사진">사진</label>
<input type="file" id="사진" accept="image/*, video/*" required placeholder="프로필 사진"><br>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</body>
</html>
회원가입
회원가입
0411_폼게시판테스트.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<table border="1">
<caption>form 연습하기</caption>
<tr>
<td>아이디</td>
<td>
<input type="text" name="id" id="id" placeholder="아이디를 입력하세요">
<input type="button" value="아이디 중복검사">
</td>
</tr>
<tr>
<td>비밀번호</td>
<td>
<input type="password" name="pw" id="pw" placeholder="비밀번호를 입력하세요">
</td>
</tr>
<tr>
<td>수강 과목</td>
<td>
<input type="checkbox" name="sub" value="java" id="java" checked>
<label for="java">Java</label>
<input type="checkbox" name="sub" value="jsp" id="jsp">
<label for="jsp">Jsp</label>
<input type="checkbox" name="sub" value="spring" id="spring">
<label for="spring">Spring</label>
</td>
</tr>
<tr>
<td>휴대전화</td>
<td>
<select name="tel1">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
</select>-
<input type="text" name="tel2">-
<input type="test" name="tel3">
</td>
</tr>
<tr>
<td>이메일</td>
<td>
<input type="email" name="email">
</td>
</tr>
<tr>
<td>E-mail 수신여부</td>
<td>
<input type="radio" id="yes" name="agreeEmail" value="yes" checked>
<label for="yes">수신함</label>
<input type="radio" id="no" name="agreeEmail" value="no">
<label for="no">수신안함</label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="회원가입">
</td>
</tr>
</table>
</form>
<form action="#">
<table border="1">
<caption>form 연습하기</caption>
<tr>
<td>아이디</td>
<td><input type="text" name="id" id="아이디" placeholder="아이디를 입력하세요">
<input type="button" name="아이디 중복검사" value="아이디 중복검사"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="pw" id="패스워드" placeholder="비밀번호를 입력하세요"></td>
</tr>
<tr>
<td>수강과목</td>
<td><input type="checkbox" name="subject" id="Java" value="java">
<label for="Java">Java</label>
<input type="checkbox" name="subject" id="Jsp" value="jsp">
<label for="Jsp">Jsp</label>
<input type="checkbox" name="subject" id="Spring" value="spring">
<label for="Spring">Spring</label>
</td>
</tr>
<tr>
<td>휴대전화</td>
<td><select name="number">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
</select>-
<input type="text" id="tel2" name="tel2">-
<input type="text" id="tel3" name="tel3">
</td>
</tr>
<tr>
<td>이메일</td>
<td><input type="email" name="email" id="이메일"></td>
</tr>
<tr>
<td>E-mail 수신여부</td>
<td><input type="radio" name="메일수신" id="동의" value="yes">
<label for="동의">수신함</label>
<input type="radio" name="메일수신" id="거부" value="no">
<label for="거부">수신안함</label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="회원가입">
</td>
</tr>
</table>
</form>
</body>
</html>
0412_폼게시판테스트.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div align="center">
<h1>게시판</h1>
전체 게시글 수 : 93개
<table border="1">
<tr>
<th>번호</th>
<th>작성자</th>
<th>작성일</th>
<th>제목</th>
<th>내용</th>
<th>삭제</th>
</tr>
<tr>
<td>31</td>
<td>작성자31</td>
<td>2022-04-16</td>
<td>제목31</td>
<td>내용31</td>
<td><input type="button" value="삭제하기"></td>
</tr>
<tr>
<td>32</td>
<td>작성자32</td>
<td>2022-04-16</td>
<td>제목32</td>
<td>내용32</td>
<td><input type="button" value="삭제하기"></td>
</tr>
<tr>
<td>33</td>
<td>작성자33</td>
<td>2022-04-16</td>
<td>제목33</td>
<td>내용33</td>
<td><input type="button" value="삭제하기"></td>
</tr>
<tr>
<td>34</td>
<td>작성자34</td>
<td>2022-04-16</td>
<td>제목34</td>
<td>내용34</td>
<td><input type="button" value="삭제하기"></td>
</tr>
<tr>
<td>35</td>
<td>작성자35</td>
<td>2022-04-16</td>
<td>제목35</td>
<td>내용35</td>
<td><input type="button" value="삭제하기"></td>
</tr>
<tr>
<td colspan="6" align="center"><input type="button" value="메인화면"></td>
</tr>
</table>
<a href="#">[이전]</a>
<a href="#">[7]</a>
<a href="#">[8]</a>
<a href="#">[9]</a>
<a href="#">[이후]</a>
</div>
</body>
</html>
게시판
전체 게시글 수 : 93개| 번호 | 작성자 | 작성일 | 제목 | 내용 | 삭제 |
|---|---|---|---|---|---|
| 31 | 작성자31 | 2022-04-16 | 제목31 | 내용31 | |
| 32 | 작성자32 | 2022-04-16 | 제목32 | 내용32 | |
| 33 | 작성자33 | 2022-04-16 | 제목33 | 내용33 | |
| 34 | 작성자34 | 2022-04-16 | 제목34 | 내용34 | |
| 35 | 작성자35 | 2022-04-16 | 제목35 | 내용35 | |
'코딩 > 2023 HTML & CSS' 카테고리의 다른 글
| 2023.08.10 / CSS3 - 코딩 22 일차 (0) | 2023.08.10 |
|---|---|
| 2023.08.09 / CSS2 - 코딩 21 일차 (0) | 2023.08.09 |
| 2023.07.21 / HTML 3- 코딩 2 일차 (0) | 2023.07.21 |
| 2023.07.20 / HTML 2- 코딩 1 일차 (0) | 2023.07.20 |
| 2023.07.20 / HTML 1- 코딩 1 일차 (0) | 2023.07.20 |
'코딩/2023 HTML & CSS' Related Articles
more
