[HTML] 6. 폼 관련 태그
오늘 배운 것
- 오늘은 <form>, <input> 태그 및 관련 속성들에 대해 배웠다.
- 위 태그, 속성들을 응용한 간단한 폼, 로그인 화면들을 제작했다.
(1) <form>&<input> 태그
<form>: 폼을 만들어주는 태그.
<form method>: 통신 방식으로 post하는 태그이다.
action 속성: 해당 문서로 이동하기
UI=User Interface
<input type=”text”>:
<input type=”submit”>: 제출 버튼을 생성한다. 서버로 전송할 때 사용된다. 기본값으로 “제출”이 출력된다.
(type=”submit”의 기본값이 “출력”이기 때문에, <input> 태그에 value=”제출”을 추가해도 출력 텍스트가 변하지 않는다!)
<input type=”button”>: 버튼을 출력한다. 다만 type=”submit”과는 다르게, 클릭은 가능하나 기본 이동은 되지 않는다.
<!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 method>: 통신방식으로 post-->
<!--action 속성: 해당 문서로 이동-->
<form method="post" action="search.jsp">
<!--<input>:특정 UI 항목을 만들 때 사용-->
<!--UI: User Interface(디자인)-->
<!--<input type="text">: 텍스트 박스-->
<!--type=submit: 제출 버튼 생성. 서버로 전송될 때 사용-->
<!--기본값이 '제출'-->
<input type="text">
<!--<input type="submit">-->
<!--submit 의 기본값이 제출이기에, value=제출이라고 입력해도 같은 결과가 나온다.-->
<!--파일에 액세스 할 수 없음.->search.jsp파일이 없기 때문.-->
<input type="submit" value="제출">
<!--type="button"은 클릭은 되지만, 기본 이동은 되지 않는다.-->
<input type="button" value="검색">
</form>
</body>
</html>
(2) <form>&<input> 관련 속성 및 응용
type=”checkbox”: 다중 선택이 가능한 체크박스(네모칸)을 출력한다.
type=”radio”: 단일 선택이 가능한 라디오 버튼(동그라미 칸)을 출력한다.
*<input type=”radio”>의 경우, name 속성에서 이름을 통일해야 한다.
(ex:
<input type=”radio” name=”a”>
<input type=”radio” name=”a”> (o)
<input type=”radio” name=”a”>
<input type=”radio” name=”b”>(x))
<label>: 체크박스, 라디오 버튼 출력 태그를 <label> 태그로 감싸면, 옆의 텍스트만 클릭해도 자동으로 선택된다.
<!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>
<h2>수강분야(다수 선택 가능)</h2>
<ul>
<!--<input tyep="checkbox">: 다중 선택-->
<!--name="grammer": 서버로 전송되는 값(화면 표시x)-->
<input type="checkbox" name="grammer">문법<br>
<input type="checkbox" name="writting">작문<br>
<!--<label> 태그로 체크박스, 라디오 버튼을 감싸면, 텍스트만 클릭해도 선택이 된다.-->
<label>
<input type="checkbox" name="reading">독해<br>
</label>
</ul>
<h2>수강분야(한 과목만 선택 가능)</h2>
<ul>
<!--<input type="radio">: 라디오 버튼을 만들 때, name 속성을 하나로 일치시켜야 한다.-->
<!--name 속성이 일치하지 않을 때, 복수 선택이 가능해진다.-->
<label><input type="radio" name="gr">문법</label><br>
<label><input type="radio" name="gr">작문<br></label>
<input type="radio" name="gr">독해<br>
</ul>
</form>
</body>
</html>
<fieldset>: 영역을 묶어주는 태그.
<legend>: <fieldset> 태그로 묶인 영역에 제목을 달아주는 태그이다.
*<label for name””>-<input id=name””>
*위의 name을 통일시켜야, <label>태그가 <input>태그에 잘 적용될 수 있다.
<!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>
<!--<fieldset> 태그는 영역을 묶어준다.-->
<!--<legend> 태그는 <fieldset> 태그에 제목을 달아준다.-->
<fieldset>
<legend>개인 정보</legend>
<ul>
<li>
<!--<label for name>-<input id=name>-->
<!--for="name"과 id="name"을 맞추어야 커서가 위치된다.-->
<label for="name">이름</label>
<!--텍스트 박스-->
<input type="text" id="name">
</li>
</ul>
</fieldset>
</form>
</body>
</html>
<input type=”number”>
-min 속성: 입력받을 수치의 최솟값을 설정한다.
-max 속성: 입력받을 수치의 최댓값을 설정한다.
-value 속성: 초기값을 설정한다. 이때 value 로 설정된 값은 기본값이 된다.
<input type=”color”>: 색상을 입력받는다.
-이 때, value 값과 색상코드를 사용하여 기본값(색상)을 지정할 수 있다. (16진수/00~ff)
(ex:<input type=”color” value=”#00ff00”>)
<!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>
<fieldset>
<legend>등록 정보</legend>
참여인원<small>(최대 10명)</small>
<!--input type="number": 스핀으로 숫자를 증감, 입력-->
<!--min 속성은 최소, max 속성은 최대치를 설정한다.-->
<!--아래 태그에서는 min="0",max="10"이니 0부터 10까지의 수가 선택 가능하다.-->
<input type="number" min="0" max="10"><br>
지원물품<small>(1인당 5개)</small>
<!--value="5": 초기값을 5로 설정-->
<!--step="5":숫자 5 단위로 선택 가능-->
<input type="number" value="5" step="5" min="0" max="50"><br>
<!--<input type="range">: 슬라이드 바를 생성한다.-->
희망단계<small>(하,중,상)</small>
<input type="range" value="2" min="1" max="3"><br>
<!--<input type="color">: 색상을 선택할 수 있다.-->
<!--value 속성과 색상코드를 이용해 기본 색상을 설정할 수 있다.-->
<!--16진수가 2개씩 쌍으로 6개(RGB)00~ff-->
<!--10진수 0-9, 16진수 A(10)-F(15)-->
<input type="color" value="#00ff00">
</fieldset>
</form>
</body>
</html>
-date/week/month: 차례대로 연월일, 주, 연월을 선택하는 창을 출력하는 속성이다. (<input type=date/week/month>)
<!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>
<h2>날짜 입력</h2>
<!--<input type="date">는 연, 월, 일-->
<!--<input type="month">는 연, 월-->
<!--<input type="week">는 주를 선택하는 창을 출력한다.-->
<input type="date"><br>
<input type="month"><br>
<input type="week"><br>
</form>
</body>
</html>
<input type=”password”>: 입력한 텍스트가 검은 불릿(동그라미)으로 출력된다.
<input type=”submit”>: 제출 버튼을 생성한다. value 속성을 이용해 버튼에 텍스트를 출력할 수도 있다. submit으로 제출된 값은 <form>태그의 action값을 찾아간다.
<!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>
<fieldset>
아이디 <input type="text"><br>
<!--<input type="password">: 입력한 텍스트가 불릿(검은 점)으로 가림처리 되어 출력된다.-->
비밀번호 <input type="password">
<!--<input type="submit": form 태그에 action값을 찾아감-->
<!--action 값이 없어서 초기화-->
<input type="submit" value="로그인">
</fieldset>
</form>
</body>
</html>
<input type=”datetime-local”>:연도,월,일,시간을 선택하는 창을 출력한다.
<!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>
<h2>검사 시간을 선택하세요(오늘)</h2>
시작 시간 <input type="time" value="00:00"><br>
종료 시간 <input type="time" value="00:00"><br>
<!--<input type="datetime-local": 연도, 월, 일, 시간을 선택한다.-->
<h2>검사 시간을 선택하세요(다른 날짜)</h2>
시작 시간 <input type="datetime-local" value="2016-03-15 01:00"><br>
종료 시간 <input type="datetime-local" value="2016-03-15 18:00">
</form>
</body>
</html>
<form method=”post”>: post 방식으로 action에 적힌 파일을 호출하는 태그이다.
이 때, 지정된 파일이 존재하지 않거나 이동하지 못하는 상황이라면 오류가 발생한다. (ERR_FILE_NOT_FOUND)
<!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>
<h3>메일링 리스트 등록</h3>
<!--post 방식으로 register.jsp를 호출한다.-->
<!--ERR_FILE_NOT_FOUND: register.jsp로 이동하지 못해 오류 발생-->
<form method="post" action="regiset.jsp">
메일 주소1<input type="text"><br>
메일 주소2<input type="text"><br>
<!--<input type="submit": 기본값이 제출-->
<input type="submit" value="제출">
<!--<input type="reset": 기본값이 초기화-->
<!--type="reset": form 태그 안에 있는 값을 초기화-->
<!--<input type="reset">-->
<input type="reset" value="다시 입력">
</form>
</body>
</html>
size 속성: <input> 태그와 함께 사용하면 검색창의 크기를 조절할 수 있다.
<!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>
<table>
<tr>
<!--size 속성으로 검색창의 크기를 설정할 수 있다.-->
<td>아이디<input type="text" size="15"></td>
<td>비밀번호<input type="password" size="15"></td>
<td><input type="image" src="images/login.jpg"></td>
<td></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
<select>:드랍다운리스트-콤보박스를 생성하는 태그이다. 실무에서 많이 사용된다.
<option>: <select>로 만들어진 콤보박스 내에서 선택지를 만드는 태그이다.
readonly 속성: 설정된 value 값을 고정시킨다. 주로 id에 많이 쓰인다.
autofocus: 마우스 커서가 깜빡거리는 속성이다.
required: 필수 요소로 지정하는 속성이다. 해당 속성으로 지정된 태그는 반드시 입력을 받아야 제출 할 수 있다.
placeholder: 힌트를 작성하는 속성이다. 전화번호, 주소 등에 많이 쓰인다.
maxlength: 입력받을 글자의 최대 글자수를 설정하는 속성이다. 주민번호, 전화번호 등에 쓰인다.
<!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>
<h1>여름방학 특강 신청</h1>
<form>
<fieldset>
<legend>수강 과목</legend>
<ul>
<li>
영어회화(초급)
<!--readonly 속성은 설정된 value 값을 고정시킨다.-->
<!--readonly는 주로 id에 많이 사용한다.-->
<input type="text" value="오전 9:00~11:00" readonly>
</li>
</ul>
</fieldset>
<fieldset>
<legend>신청자</legend>
<ul>
<li>
이름
<!--autofocus 속성을 추가하면 마우스 커서가 깜빡거린다.-->
<!--required 속성을 추가하면 해당 <input>이 필수값이 된다.-->
<input type="text" autofocus required>
</li>
<li>
학번
<!--placeholder 속성은 힌트를 삽입한다.->전화번호에서 자주 사용-->
<!--maxlength 속성은 글자 수를 제한한다.-->
<input type="text" placeholder="하이픈 없이 입력" maxlength="8">
</li>
<li>
학과
<!--<select>:드랍다운리스트-콤보박스를 생성하는 태그. 실무에서 많이 사용0-->
<!--<option>: 선택지를 생성하는 태그-->
<select>
<!--첫번째 <option> 값이 기본 선택된다.-->
<!--value 속성의 값은 서버로 들고 간다.-->
<!--<option>에 selected 속성을 추가하면 기본값으로 설정된다.-->
<option value="arch">건축공학과</option>
<option value="mach" selected>기계공학과</option>
<option value="indu">산업공학과</option>
<option value="elec">전기전자공학과</option>
<option value="comp">컴퓨터공학과</option>
<option value="chem">화학공학과</option>
</select>
</li>
</ul>
</fieldset>
<fieldset>
<legend>교재 주문</legend>
<ul>
<li>
교재
<input type="number" value="1" min="1" max="3">
</li>
<li>
단체주문
<input type="number" value="10" min="10" step="10" max="100">
</li>
</ul>
</fieldset>
<fieldset>
<button type="submit">신청하기</button>
<button type="reset">다시쓰기</button>
</fieldset>
</form>
</body>
</html>
<select>+multiple 속성: 다중 선택이 가능한 콤보박스를 생성한다.
size 속성: 콤보박스의 크기를 조절한다.
<!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>
<h1>여름방학 특강 신청</h1>
<form>
<fieldset>
<legend>수강 신청인</legend>
<ul>
<li>학번 <input type="text" autofocus></li>
<li>이름 <input type="text" autofocus></li>
<!--<select>+multiple: 다중 선택이 가능한 콤보박스-->
<!--size 속성: 콤보박스 크기 조절-->
<li>학과 <select size="3" multiple>
<option value="arch">건축공학과</option>
<option value="comp">컴퓨터공학과</option>
<option value="wood">토목공학과</option>
<option value="chem">화학공학과</option>
</select>
</ul>
</fieldset>
</form>
</body>
</html>
<optgroup>: <option> 태그들을 하나의 그룹으로 묶는다.
<optgroup>+label 속성: 분류된 옵션 태그의 그룹에 이름을 붙인다. (ex: 과일-오렌지, 사과, 딸기…)
<!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>
<h1>여름방학 특강 신청</h1>
<form>
<fieldset>
<legend>수강 신청인</legend>
<ul>
<li>학번 <input type="text" autofocus></li>
<li>이름 <input type="text" autofocus></li>
<li>학과
<select>
<!--<optgroup>: <option> 태그들을 그룹으로 묶는다.-->
<!--<optgroup>+label: 분류된 옵션 태그들에 이름을 붙인다.-->
<optgroup label="공과대학">
<option value="arch">건축공학과</option>
<option value="comp">컴퓨터공학과</option>
<option value="wood">토목공학과</option>
<option value="chem">화학공학과</option>
</optgroup>
<optgroup label="인문대학">
<option value="kor">국문학과</option>
<option value="eng">영문학과</option>
<option value="the">철학과</option>
</optgroup>
</select>
</ul>
</fieldset>
</form>
</body>
</html>
<textarea>: 텍스트창을 생성한다.
<textarea>+cols/rows 속성: 텍스트 창의 크기를 조절한다.
<!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>
<fieldset>
<legend>로그인</legend>
아이디<input type="text" size="10" autofocus>
비밀번호<input type="password" size="10" autofocus>
<input type="submit" value="로그인">
</fieldset>
<fieldset>
<legend>가입하기</legend>
<ul>
<li>아이디<em>*</em>
<input type="text" required></li>
<li>비밀번호<em>*</em>
<input type="password" required></li>
<li>비밀번호 확인<em>*</em>
<input type="password" required></li>
<li>이름<em>*</em>
<input type="text" required></li>
<li>메일 주소<em>*</em>
<input type="text" required></li>
<li>전화번호
<input type="text"></li>
</ul>
</fieldset>
<fieldset>
<legend>이지스퍼블리싱</legend>
<!--<textarea>+cols/rows 속성: 텍스트창 크기 조절 -->
<textarea name="Intro" cols="60" rows="5">
열심히 사는 사람들의 손을 잡아주는 곳~ 이지스 퍼블리싱
우리는 책을 내기 전에 다시 한 번 물어봅니다
우리는 책을 내기 전에 다시 한 번 물어봅니다
우리는 책을 내기 전에 다시 한 번 물어봅니다
우리는 책을 내기 전에 다시 한 번 물어봅니다
우리는 책을 내기 전에 다시 한 번 물어봅니다
우리는 책을 내기 전에 다시 한 번 물어봅니다
</textarea>
</fieldset>
<fieldset>
<input type="submit" value="가입하기">
<input type="reset" value="다시쓰기">
</fieldset>
</form>
</body>
</html>
parseInt 속성: 입력받은 값을 정수로 변환한다.
<!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>
<!--parseint 속성: 정수로 변환-->
<!--=<input name="result">-->
<form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
<input type="number" name="num1" value="0">
+<input type="number" name="num2" value="0">
<!----<input name="result">-->
=<output name="result">
</form>
</body>
</html>
<progress>: 진행 상태를 브라우저에 표시한다. 최솟값은 min, 최댓값은 max 속성을 이용한다. 현재 값은 value를 통해 지정할 수 있다.
high/low: 현재 value값에 따라 progress 창의 색을 변화시킨다. high를 초과하거나, low보다 밑도는 수치가 입력되면 progress 창의 색이 노란 색으로 변한다.
<!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>
<ul>
<li>
<!--<progress>:진행 상태를 브라우저에 표기-->
<!--60초 중 50초 진행-->
10초 남음 <progress max="60" value="50"></progress>
</li>
<li>
<!--100 중 30 진행-->
진행률 30% <progress max="100" value="30"></progress>
</li>
</ul>
</body>
</html>
<!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>
<ul>
<li>
점유율 0.8
<!--전체 크기 1을 기준으로 0.8만큼 차지합니다.-->
<meter value="0.8"></meter>
</li>
<li>
사용량 64%
<!--전체 100 중 64를 차지합니다.-->
<meter min="0" max="100" value="64"></meter>
</li>
<li>
트래픽 초과
<!--전체 100 중 64를 차지합니다.-->
<!--high, low 속성: 설정한 값을 초과하거나 더 낮은 값이 입력되면, 색이 변한다.-->
<meter min="100" max="10000" low="3000" high="8192" value="2000"></meter>
</li>
</ul>
</body>
</html>
'HTML,CSS > HTML' 카테고리의 다른 글
[HTML] HTML 파일명 작성 규칙 (0) | 2024.07.01 |
---|---|
[HTML] 5. 표(테이블) 만들기 (0) | 2024.04.15 |
[HTML] 4. 링크 삽입하기 (0) | 2024.04.15 |
[HTML] 3. 이미지 출력하기 (0) | 2024.04.14 |
[HTML] 2. HTML 기본 태그 (0) | 2024.04.14 |