728x90
반응형
<목차>
1) HTML 태그
1-1) form 태그
1-2) input 태그 종류
2) 예제
1) HTML 태그
home.html
<!-- cntl + / => 주석 -->
<!-- HTML의 버전 정보를 표시, 웹 문서임을 나타내는 정보 -->
<!DOCTYPE html>
<!-- HTML 문서의 시작을 알리는 부분, 사용할 언어 지정 -->
<html lang="kor">
<!-- 브라우저에 정보를 주는 태그 -->
<head>
<!-- 문서의 문자 인코딩 지정 -->
<meta charset="UTF-8" />
<!-- 반응형 디자인을 지원하여 다양한 장치에서 페이지가 잘 보이도록 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 문서의 제목 -->
<title>HOME</title>
<!-- <script>, <style> -->
</head>
<!-- 브라우저에 실제로 표시되는 내용 -->
<body>
<!-- h1부터 h6까지 있으며, h 문자 뒤에 오는 숫자가 커질수록 글자 크기가 작아짐!! -->
<h4>Welcome, HOME</h4>
<!--
<a> : HTML 내에 링크를 생성하는 태그
href 속성 : 링크로 이동할 URL을 지정
target 속성 : 링크가 이동할 위치를 지정
_self : 링크를 현재 창이나 프레임에서 열기(기본값)
_blank : 링크를 새 탭이나 새 창에서 열기
_parent : 링크를 현재 프레임의 부모 프레임에서 열기
_top : 링크를 최상위 프레임에서 열기
-->
<ul>
<li>
<a href="https://naver.com" target="_blank">네이버</a>
</li>
<li>
<a href="https://daum.net" target="_parent">다음</a>
</li>
<li>
<a href="https://google.com" target="_top">구글</a>
</li>
</ul>
<!-- hr 태그는 구분선을 생성해주며, 단독으로 사용되는 태그이다 -->
<hr />
<!-- ul 태그 : 순서가 없는 목록을 생성할 때 사용하는 태그 -->
<ul>
<li>
<a href="./0.route/route.html">경로</a>
</li>
<li>
<a href="./1.image/image.html">이미지</a>
</li>
<li>
<a href="./2.text/text1.html">문단, 텍스트 서식</a>
</li>
<li>
<a href="./2.text/text2.html">목록 만들기</a>
</li>
<li>
<a href="./3.table/table.html">테이블</a>
</li>
<li>
<a href="./4.form/form.html">폼</a>
</li>
<li>
<a href="./4.form/form2.html">Input 태그 종류</a>
</li>
</ul>
</body>
</html>
1-1) form 태그
form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Form 예제</title>
</head>
<body>
<!--
<form> ... </form> 태그의 속성
action : <form> 태그 안의 내용을 전송할 서버의 주소
method : 사용자가 입력한 내용을 서버에 전송하는
방식을 지정
(HTTP 프로토콜을 통해 데이터를 전송하는 두 방법)
GET : 데이터를 URL 쿼리스트링으로 전송.
주소 표시줄에 사용자가 입력한 내용이 그대로
노출되기 때문에 주로 데이터를 조회할 때 사용.
최대 4096byte까지의 데이터를 전송.
POST : HTTP 메시지의 본문(body)에 데이터를 포함하여
전송한다. 입력 내용의 길이 제한이 없으며,
사용자가 입력한 내용이 주소창에 노출되지 않는다.
주로 로그인, 폼 데이터 제출, 데이터베이스 갱신
작업에 사용한다.
enctype : 폼 데이터의 인코딩 방식을 지정한다.
파일 업로드 시 multipart/form-data로 설정해야 한다.
<fieldset>과 <legend> : 폼 요소를 그룹화하고 그룹의 제목을 지정한다.
-->
<form action="" method="post">
<fieldset>
<legend>회원 정보</legend>
<label for="id">아이디: </label>
<input type="text" name="id" id="id" class="cid" value="hong" /><br />
<label for="pw">패스워드: </label>
<input type="password" name="pw" id="pw" class="cid" /><br /><br />
<input type="submit" value="로그인" />
<input type="reset" value="취소" />
</fieldset>
</form>
</body>
</html>
1-2) input 태그 종류
form2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Input 태그 종류</title>
<script>
function button() {
alert("버튼버튼");
}
</script>
</head>
<body>
<form action="" method="get">
<fieldset>
<legend>분류 1</legend>
입력란
<!-- placeholder : 해당 태그의 폼에 데이터를 입력하기 전에 미리 해당 문자가 보여지도록 하는 속성 -->
<!-- readonly : 해당 태그에는 데이터를 입력할 수 없도록 하는 속성 -->
<input type="text" placeholder="id를 입력하세요" readonly /><br />
<!-- required : 해당 태그에 반드시 데이터가 입력되어야 submit되도록 하는 필수 작성요소를 지정하는 속성 -->
* 비밀번호 입력란 <input type="password" required /><br />
<!-- type="url" : url인지 아닌지를 검사하는 속성 -->
URL <input type="url" /><br />
Email 입력란 <input type="email" /><br />
숫자 입력란 <input type="number" /><br />
전화번호 입력란 <input type="tel" /><br />
검색
<input
type="search"
placeholder="검색어를 입력하세요."
size="40"
/><br />
색상 <input type="color" /><br />
범위 <input type="range" value="0" max="10" /><br />
날짜 <input type="date" /><br />
날짜 시간 <input type="datetime-local" /><br />
월 <input type="month" /><br />
주 <input type="week" /><br />
시간 <input type="time" /><br />
파일 <input type="file" /><br />
이미지 <input type="image" src="../1.image/file/htmlLogo.png" /><br />
</fieldset>
<fieldset>
<legend>분류 2</legend>
히든 <input type="hidden" name="hidden" value="30" /><br />
체크박스 <input type="checkbox" name="checkbox" value="사과" />사과
<input type="checkbox" name="checkbox" value="바나나" checked />바나나
<input type="checkbox" name="checkbox" value="포도" />포도
<br />
라디오 <input type="radio" name="radio" value="SKT" />SKT
<input type="radio" name="radio" value="KT" />KT
<input type="radio" name="radio" value="LG" />LG
<br />
셀렉트
<select name="select" size="1" multiple>
<option value="1">선택1</option>
<option value="2" selected>선택2</option>
<option value="3">선택3</option>
</select>
<br />
여러줄 입력란
<textarea cols="30" rows="10"></textarea>
<br />
<!-- onclick : 클릭 이벤트가 발생했을 때 해당하는 자바스크립트 함수를 실행시켜주는 속성 -->
버튼 <input type="button" value="버튼" onclick="button();" /><br />
버튼2
<input
type="button"
value="home"
onclick="location.href='../home.html'"
/>
<br />
버튼3 <button type="button" onclick="alert('ㅋㅋㅋㅋㅋ')">버튼3</button>
</fieldset>
<input type="submit" value="전송하기" />
<input type="reset" value="취소하기" />
</form>
</body>
</html>
2) 예제
form_ex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Form 연습 예제</title>
<style>
form {
width: 100%;
}
form > div {
margin: 0 auto;
width: 260px;
text-align: center;
}
fieldset {
margin: 0 auto;
width: 260px;
border-radius: 10px 10px;
}
fieldset > legend {
margin: 0 auto;
}
fieldset > input {
border-radius: 10px 10px;
}
</style>
</head>
<body>
<form action="" method="get">
<fieldset>
<legend>회원정보</legend>
<label for="m_id">아이디: </label><br />
<input
type="text"
name="id"
id="m_id"
value="hong"
style="width: 250px"
/><br />
<label for="m_pw">비밀번호: </label><br />
<input
type="password"
name="password"
id="m_pw"
style="width: 250px"
/><br />
<label for="m_email">이메일: </label><br />
<input
type="email"
name="email"
id="m_email"
placeholder="이메일 형식을 지켜서 입력해주세요!"
style="width: 250px"
/><br />
<label for="m_name">이름: </label><br />
<input type="text" name="name" id="m_name" style="width: 250px" /><br />
<label for="m_birth">생년월일: </label><br />
<input type="date" name="birth" id="m_birth" style="width: 250px" />
<br />
<label for="man">남성</label>
<input
type="radio"
name="gender"
id="man"
class="gender"
value="남성"
checked
/>
<label for="woman">여성</label>
<input
type="radio"
name="gender"
id="woman"
class="gender"
value="여성"
/>
<br />
<label for="m_phoneNumber">전화번호: </label><br />
<input
type="tel"
name="phoneNumber"
id="m_phoneNumber"
placeholder="-를 빼고 입력해주세요."
style="width: 250px"
/>
</fieldset>
<fieldset>
<legend>과목</legend>
<label for="html">HTML</label>
<input
type="checkbox"
name="subject"
id="html"
class="subject"
value="HTML"
/>
<label for="css">CSS</label>
<input
type="checkbox"
name="subject"
id="css"
class="subject"
value="CSS"
checked
/>
<label for="JavaScript">JavaScript</label>
<input
type="checkbox"
name="subject"
id="JavaScript"
class="subject"
value="JavaScript"
/>
<br />
<br />
<label for="top">상</label>
<input type="radio" name="grade" id="top" class="level" value="상" />
<label for="middle">중</label>
<input type="radio" name="grade" id="middle" class="level" value="중" />
<label for="bottom">하</label>
<input type="radio" name="grade" id="bottom" class="level" value="하" />
<br />
<br />
<p id="req">요청사항</p>
<textarea name="request" id="reqWord" cols="30" rows="10"></textarea>
</fieldset>
<div>
<input type="submit" value="전송하기" />
<input type="reset" value="취소하기" />
</div>
</form>
</body>
</html>
※ 위의 input 값 입력에 따른 쿼리 스트링(서버 측에 전송되는 데이터의 형식) 결과
- 이 경우, form 태그의 method 속성값은 "get"이다!!
'HTML & CSS > HTML & CSS(2024 version)' 카테고리의 다른 글
| CSS(2) - inline / block / inline-block 요소, 배치, 메뉴 만들기, 시맨틱 태그 (0) | 2024.05.31 |
|---|---|
| CSS(1) - 기본 문법, 선택자, 텍스트, 목록, 자손 선택자, 박스 모델 (0) | 2024.05.30 |
| HTML(2) - 이미지, 텍스트, 테이블 관련 태그 (0) | 2024.05.28 |
| HTML(1) - WEB, HTML 개념 및 구조 (0) | 2024.05.27 |
