▣ 제출 양식
· 입력 데이터를 처리하기 위한 버튼 정의
· 폼 태그의 action 속성에 지정된 파일로 값 전송
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제출 양식 만들기</title>
</head>
<body>
<h2>입력 양식 데이터 전송 버튼</h2>
<form action="#" method="get">
<p>이름 : <input type="text" id="user"></p>
<p>학과 : <input type="text" id="major"></p>
<input type="submit" value="전송">
</form>
</body>
</html>
▣ 초기화 양식
· 폼에 입력한 데이터 모두 초기화
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>초기화 양식 만들기</title>
</head>
<body>
<h2>입력 데이터 초기화 버튼</h2>
<form action="#" method="get">
<p>이름 : <input type="text" id="user"></p>
<p>학과 : <input type="text" id="major"></p>
<input type="submit" value="전송">
<input type="reset" value="다시 작성">
</form>
</body>
</html>
▣ 텍스트 입력 양식
· 기본적인 텍스트를 입력할 때 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 입력 양식 만들기</title>
</head>
<body>
<h2>문자 입력 양식</h2>
<form>
<p>
<label for="username">이름 : </label>
<input type="text" name="user" id="username" size="10">
</p>
<p>학번 : <input type="text" name="studentnum" size="10"></p>
<p>학과 : <input type="text" name="major" value="컴퓨터과학과"></p>
<input type="submit" value="전송">
<input type="reset" value="다시작성">
</form>
</body>
</html>
▣ 비밀번호 입력 양식
· 사용자가 입력한 문자를 보이지 않게 '● ● ● ' 으로 처리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>비밀번호 입력 양식 만들기</title>
</head>
<body>
<!-- placeholder : 문자나 이미지 등이 들어갈 자리에 임시로 채워 놓는 내용물을 의미 -->
<!-- required : 필수입력값 -->
<h2>회원 인증 입력 양식</h2>
<form>
<p>ID : <input type="text" id="user" size="15" required></p>
<p>PW : <input type="password" id="pw" size="15" placeholder="비밀번호" required></p>
<input type="submit" value="전송">
<input type="reset" value="다시작성">
</form>
</body>
</html>
▣ 텍스트 공간 입력 양식
· 텍스트를 여러 줄에 걸쳐 자유롭게 입력 가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 공간 입력 양식 만들기</title>
</head>
<body>
<h2>텍스트 공간 입력 양식</h2>
<form>
<textarea rows="5" cols="50">텍스트를 작성하는 공간입니다.</textarea>
<p></p>
<input type="submit" value="전송">
<input type="reset" value="다시작성">
</form>
</body>
</html>
▣ <fieldset> 태그
· 입력 폼이 여러 개 있을때, 경계선을 그려서 하나의 그룹으로 만들 때 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>입력 폼 그룹으로 묶기</title>
</head>
<body>
<form>
<fieldset>
<legend>개인 정보 입력</legend>
<p>이름 : <input type="text" id="name"></p>
<p>학교 : <input type="text" id="school"></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</fieldset>
</form>
</body>
</html>
▣ 라디오 입력 양식
· 여러 항목 중 하나만 선택할 때 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>라디오 양식 만들기</title>
</head>
<body>
<form>
<h3>당신의 성별은 무엇입니까?</h3>
<input type="radio" name="gender" value="male">남자
<input type="radio" name="gender" value="female" checked>여자
<p></p>
<h3>당신은 몇 학년 입니까?</h3>
<input type="radio" name="year" value="1" checked>1학년
<input type="radio" name="year" value="2">2학년
<input type="radio" name="year" value="3">3학년
<input type="radio" name="year" value="4">4학년
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
</html>
▣ 체크박스 양식
· 동시에 여러 항목을 선택할 때 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>체크박스 양식 만들기</title>
</head>
<body>
<form>
<h3>현재 관심을 가지고 있는 학습 주제는 무엇입니까?</h3>
<input type="checkbox" name="subject" value="HTML5">HTML5 <br>
<input type="checkbox" name="subject" value="CSS3">CSS3 <br>
<input type="checkbox" name="subject" value="Javascript">Javascript<br>
<input type="checkbox" name="subject" value="Jquery">Jquery
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
</html>
▣ 버튼 양식
· <button> 태그 혹은 <input> 태그를 사용하여 정의
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>버튼 양식 만들기</title>
</head>
<body>
<form>
<h3>Button 태그 사용</h3>
<button type="button" onclick="alert('클릭-1 사용')">클릭-1</button>
<h3>Input 태그 사용</h3>
<input type="button" onclick="alert('클릭-2 사용')" value="클릭-2">
<h3>Image 버튼 사용</h3>
<button type="button" onclick="alert('클릭-3 사용')"><img src="../dog1.jpg" width="150" height="200"></button>
</form>
</body>
</html>
▣ 선택 목록
· 펼침 목록에서 한 가지만 선택할 수 있도록 지원하는 양식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택 목록 양식 만들기</title>
</head>
<body>
<h3>관심 있는 학습 주제 한 가지를 선택하세요.</h3>
<form>
<select name="subjects">
<option value="" disabled selected>선택하세요</option>
<option value="1">HTML5</option>
<option value="2">CSS3</option>
<option value="3">Javascript</option>
<option value="4">Jquery</option>
</select>
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
</html>
▣ 다중 선택
· Multiple 속성 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택 목록 양식 만들기</title>
</head>
<body>
<h3>관심 있는 학습 주제 모두 선택하세요.</h3>
<form>
<select name="subjects" size="4" multiple>
<option value="1"selected>HTML5</option>
<option value="2">CSS3</option>
<option value="3">Javascript</option>
<option value="4">Jquery</option>
</select>
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
</html>
▣ <optgroup>태그
· 여러 항목을 그룹으로 묶을 수 있음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택 목록 양식 만들기</title>
</head>
<body>
<h3>그룹별 선택 항목을 제공합니다.</h3>
<form>
<label>전공분야를 선택하세요.
<select name="major">
<optgroup label="computer">
<option>Software</option>
<option>Robot</option>
<option>System</option>
</optgroup>
<optgroup label="language">
<option selected>Korea</option>
<option>English</option>
<option>Gemany</option>
</optgroup>
<optgroup label="business">
<option>Service</option>
<option>Education</option>
<option>Communication</option>
<option>Marketing</option>
</optgroup>
</select>
<p></p>
<input type="submit" value="선택">
<input type="reset" value="다시선택">
</label>
</form>
</body>
</html>
▣ <datalist>태그
· 텍스트 입력 시 자동완성 기능 제공
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택 목록 양식 만들기</title>
</head>
<body>
<h3>선택사항을 직접 입력하세요.</h3>
<form>
<label>전공 분야를 입력하세요
<input type="text" list="majorlist" name="name">
<datalist id="majorlist">
<option value="Software">소프트웨어</option>
<option value="Robot">로봇</option>
<option value="System">시스템</option>
<option value="Service">서비스</option>
<option value="Education">교육</option>
</datalist>
<p></p>
<input type="submit" value="완료">
<input type="reset" value="다시작성">
</label>
</form>
</body>
</html>
▣ <input type="date"> 입력 폼
· 년-월-일 단위로 원하는 날짜 입력할 수 있음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>날짜/시간 양식 만들기</title>
</head>
<body>
<form>
<h3>오늘 날짜 입력</h3>
Today : <input type="date" name="Today">
<h3>프로젝트 수행기간</h3>
From : <input type="date" name="from" min="2025-01-01" max="2025-08-31">
To : <input type="date" name="to" min="2025-01-01" max="2025-08-31">
<p></p>
<input type="submit" value="제출">
<input type="reset" value=" 다시작성">
</form>
</body>
</html>
▣ type 속성값· month : 년-월 단위로 날짜 입력· week : 년-주 단위로 날짜 입력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>날짜/시간 양식 만들기</title>
</head>
<body>
<form>
<h3>생일(년/월) 입력</h3>
생일 : <input type="month" name="birth">
<h3>주간 계획(년/주) 입력</h3>
주간 계획 : <input type="week" name="weekend">
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
</html>
▣ type 속성값
· time : 시간만 입력
· datetime : 년-월-일-시간 단위로 입력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<h3>현재 시간 입력</h3>
Time : <input type="time" name="Now">
<h3>생일(년도, 월, 일, 시간) 입력</h3>
Birthday : <input type="datetime-local" name="birthdaytime">
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
</html>
▣ <input type="color" 입력 폼
· 색상 칩에서 원하는 색상을 선택할 수 있음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<h3>원하는 색상을 선택하세요</h3>
<input type="color" name="color" value="#000ff">
<p></p>
<input type="submit" value="선택완료">
<input type="reset" value="다시선택">
</form>
</body>
</html>
▣ <input type="number">
· 숫자를 입력할 수 있음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>숫자 입력 양식 만들기</title>
</head>
<body>
<form>
<h3>나이를 입력하세요.</h3>
<input type="number" name="age" min="1" max="150">
<p></p>
<input type="submit" value="완료">
<input type="reset" value="초기화">
</form>
</body>
</html>
▣ <input type="range" 입력 폼
· 특정 범위의 숫자를 선택할 때 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>범위 지정 양식 만들기</title>
</head>
<body>
<form>
<h3>0~100 범위에서 원하는 지점을 선택하세요.</h3>
<input type="range" name="point" min="0" max="100">
<p></p>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
▣ 이메일 입력 양식
· 텍스트 상자와 외형은 같지만 이메일 형식에 맞게 정확하게 작성하지 않으면 경고 메시지가 나타남
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이메일 입력 양식 만들기</title>
</head>
<body>
<form>
<h3>이메일을 정확하게 입력하세요<h3>
이메일 : <input type="email" name="myemail">
<p></p>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
▣ URL 입력 양식
· 입력한 URL이 http://로 시작하지 않는 등 형식에 맞지 않는다면 새로 입력하라는 메세지가 나타남
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL 입력 양식 만들기</title>
</head>
<body>
<form action="">
<h3>홈페이지 주소를 입력하세요.</h3>
홈페이지 : <input type="url" name="myhome">
<p></p>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
▣ 검색 양식
· 검색어를 입력할 때 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>검색어 입력 양식 만들기</title>
</head>
<body>
<h3>검색어를 입력하세요.</h3>
구글 검색 : <input type="search" name="googlesearch">
<p></p>
<input type="submit">
<input type="reset">
</body>
</html>
▣ <meter> 태그
· 지정된 값을 표현하기 위해 사용
▣ <progress> 태그
· 다운로드 상태 표시 같이 현재 진행율이 어떻게 되고 있는지를 나타낼 때 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>막대 그래프 양식 만들기</title>
</head>
<body>
<form>
<h3>학습량 그래프</h3>
별이 : <meter min="0" max="100" optimum="50" value="70"></meter> 70 out 100<br>
초롱 : <meter low="0.3" high="0.5" value="0.8"></meter> 80%<br>
언니 : <meter low="0.25" high="0.75" optimum="0.8" value="0.2"></meter> 20%
<br><br><br>
<h3>작업 진행율</h3>
초기 작업 : <progress value="22" max="100" title="진행율"></progress> 22%<br>
중간 작업 : <progress value="0.77" max="1"></progress> 77%<br>
다음 작업 : <progress value="0.98" max="1" ></progress> 98%
</form>
</body>
</html>
▣ 읽기 전용 속성 : readonly
· 텍스트 상자에 쓰기를 제한하고 오직 읽기만 가능하게 설정
▣ 비활성화 속성 : disabled
· 텍스트 상자를 비활성화 시킴
▣ 자동 완성 속성 : autocomplete [ autocomplete = "on" ]
· 사용했던 데이터를 기준으로 입력 중인 텍스트에 자동 완성 기능을 적용할 수 있음
▣ 자동 포커스 속성 : autofocus
· 현재 페이지가 로드될 때 처음으로 입력하고자 하는 폼을 선택하는 속성
▣ 플레이스 홀더 속성 : placeholder
· 현재 폼에 입력해야 하는 텍스트를 희미하게 보여주는 속성
▣ 필수 입력 속성 : required
· 반드시 데이터가 입력되어야 하는 폼을 지정하는 속성
▣ 오타 체크 속성 : spellcheck [ spellcheck = "true" ]
· 입력되는 문장의 오타를 실시간으로 점검
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>공통 속성 사용하기</title>
</head>
<body>
<h2>HTML5 입력 양식의 주요 속성을 연습해보자</h2>
<form>
<p>쓰기가능 : <input type="text" name="name" size="20" placeholder="이름을 입력하세요"></p>
<p>읽기전용 : <input type="text" name="name" size="10" readonly></p>
<p>사용안함 : <input type="text" name="name" size="10" disabled></p>
<p>자동완성 : <input type="text" name="name" size="10" autocomplete="on"></p>
<textarea rows="5" cols="30" spellcheck="true" placeholder="오타를 체크합니다"></textarea>
<p></p>
<input type="submit" value="전송">
<input type="reset" value="다시작성">
</form>
</body>
</html>
'웹프로그래밍 HTML > 입력양식과 공간 분할 태그' 카테고리의 다른 글
| HTML 웹페이지 만들어보기 (0) | 2025.03.10 |
|---|---|
| TEST (0) | 2025.03.10 |
| 공간 분할 태그 (0) | 2025.03.06 |
| HTML5와 입력 양식 요소 (0) | 2025.03.05 |