수업
웹 프로그래밍 - 02. HTML 폼 태그
eunslog
2023. 3. 20. 09:18
form 태그
[기본형] <form [속성="속성 값"]> 여러 폼 요소 </form>
form 태그 속성
| 속성 | 설명 |
| name | 폼의 이름을 지정한다. 한 문서 안에 여러 개의 <form> 태그가 있을 경우, 폼들을 구분하기 위해 사용한다. |
| action | <form> 태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정한다. |
| target | <action> 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다. |
method : 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정한다.
- get : 주소 표시줄에 사용자가 입력한 내용이 그대로 들어난다. 주로 데이터를 요청할 때(검색) 사용한다. URL 최대길이 2048, URL에 정보가 표시되어도 상관 없을 때 사용한다. 전송 속도가 빠르다.
- post : 대부분 사용하는 방식. 사용자의 입력을 표준 입력으로 넘겨주기 때문에 입력 내용의 길이에 제한을 받지 않고, 사용자가 입력한 내용이 드러나지 않는다.
label 태그
<label> 태그는 폼 요소에 레이블을 붙이기 위한 것이다.
[기본형]
1. <label [속성="속성 값"] > 레이블 <input ...> </label>
2. <label for="id이름">레이블</label>
<input id="id이름" [속성 = "속성 값"]>
fieldset, legend 태그
fieldset 태그 [기본형]
<fieldset [속성="속성 값]> .... </fieldset>
- 태그 사이의 폼들을 하나의 영엮으로 묶고 외곽선을 그려준다.
<legend 태그>
- <fieldset> 태그로 묶은 그룹에 제목을 붙여준다.
input 태그
사용자가 내용을 입력하는 부분을 만든다.
[기본형] <input type="유형" [속성="속성 값"]>
-id 속성
<input type="text" id="user-name" size="20">
<input type="text" id="abc" size="50">
<input> 태그의 type 속성에서 자주 쓰이는 유형
| hidden | 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가진다. |
| text | 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣는다. |
| search | 검색 상자를 넣는다. |
| tel | 전화번호 입력 필드를 넣는다. |
| url | URL 주소를 입력할 수 있는 필드를 넣는다. |
| password | 비밀번호를 입력할 수 있는 필드를 넣는다. |
| radio | 주어진 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣는다. |
| checkbox | 주어진 항목에서 2개 이상 선택 가능한 체크박스를 넣는다. |
| button | 버튼을 넣는다. |
<텍스트 관련 form 태그 요소 실습>
코드
<!DOCTYPE html>
<html lang="en">
<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="#" style="margin: auto; width: 220px;">
<fieldset>
<legend>로그인 정보</legend>
<div>
<label>아이디</label>
<input type="text" placeholder="아이디 입력">
</div>
<div>
<label>비밀번호</label>
<input type="password" placeholder="비밀번호 입력">
</div>
<div>
<label>비밀번호 확인</label>
<input type="password">
</div>
</fieldset>
</form>
</body>
</html>
type="submit", type="reset"
submit : 사용자가 폼에 입력한 정보를 서버로 전송하는 버튼을 넣는다.
reset : <input> 요소에 입력된 모든 정보를 재설정해 사용자가 입력한 내용을 모두 지울 수 있다.
-value 속성을 사용해 버튼에 표시할 내용을 지정한다.
[기본형] <input type="submit | reset" [value="버튼 내용] [속성="속성 값"]
input 태그 추가 속성
-autofocus
: 입력 커서 표시하기
-placeholder
: 힌트 표시하기
-readonly
: 읽기 전용 필드 만들기
-required
: 필수 필드 지정하기
-required 필드 앞에 자동으로 별표 붙이기
코드
<head>
<style>
.required:after {
content:" *";
color: red;
}
</style>
</head>
<body>
<label class="required">Name:</label>
<input type="text">
</body>
<select>, <optgroup>, <option> 태그 - 드롭다운 목록 생성
<select> 태그 : 드롭다운 목록 만듦.
<optgroup> 태그 : select태그 안에 있는 항목들의 그룹화. 옵션끼리 묶음.
<option> 태그 : 드롭다운 목록에 표시되는 옵션들은 이 태그를 사용함.
코드
<!DOCTYPE html>
<html lang="en">
<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>
<fieldset>
<legend> 기업현황 </legend>
<label><strong>회사명</strong><input type="text" required></label>
<label><strong>대표자</strong><input type="text" required></label>
<label><input type="radio" name="gender" value="gender1">남</label>
<label><input type="radio" name="gender" value="gender2">여</label><br>
<label><strong>사업자 번호</strong><input type="text" placeholder="NNN-NN-NNNN"></label>
<label><strong>사업자 번호</strong><input type="date"></label><br>
<label><strong>주소</strong></label><input type="text">
<label><strong>전화번호</strong><input type="tel"></label><br>
<label><strong>홈페이지</strong></label><input type="text"><br>
<label><strong>근무시간</strong></label><input type="time"><label>~</label><input type="time"><br>
<label><strong>기업형태</strong></label>
<label>대기업<input type="radio" name="company" value="big"></label>
<label>중견기업<input type="radio" name="company" value="medium"></label>
<label>중소기업<input type="radio" name="company" value="small"></label><br>
<label><strong>전년도매출액</strong></label><input type="text" placeholder="백만원">
</fieldset>
<fieldset>
<legend> 가입내용</legend>
<label><strong>구분(연회비)</strong></label>
<label>1st(100만원) <input type="radio" name="cost" value="cost1"></label>
<label>2nd(60만원) <input type="radio" name="cost" value="cost2"></label>
<label>3rd(30만원) <input type="radio" name="cost" value="cost3"></label>
<label>4th(무료) <input type="radio" name="cost" value="cost4"></label><br>
<label><strong>멘토교수</strong></label>
<label>학과</label>
<select name="class" id="class">
<option value="archi">건축공학과</option>
<option value="mechanic">기계공학과</option>
<option value="indust">산업공학과</option>
<option value="elec">전기전자공학과</option>
<option value="computer" selected>컴퓨터공학과</option>
<option value="chemical">화학공학과</option>
</select>
<label>성명</label>
<input type="text">
<hr>
<label><strong>산학협력희망분야</strong></label><br>
<label>기술개발 <input type="checkbox" name="field" value="field1"></label>
<label>기술지도 <input type="checkbox" name="field" value="field2"></label>
<label>현장실습 <input type="checkbox" name="field" value="field3"></label><br>
<label>재직자교육 <input type="checkbox" name="field" value="field4"></label>
<label>공용장비활용 <input type="checkbox" name="field" value="field5"></label>
<label>기타 <input type="text" name="field" value=""></label>
</fieldset>
<input type="submit" value="제출하기"><input type="reset" value="다시입력">
</body>
</html>
다음은 CSS 기초에 대해서 공부하겠다.
2023.03.25 - [수업] - 웹프로그래밍 - 3-1. CSS기초
웹프로그래밍 - 3-1. CSS기초
CSS(Cascading Style Sheets) : 텍스트 색상이나 크기, 이미지 크기나 위치, 표 색상, 배치 방법 등 웹 문서의 디자인 요소를 담당한다. 1. 스타일과 스타일 시트 style: 꾸미기 + 요소 배치 style sheet: html에
codingtoday.tistory.com