textarea 태그
여러 줄의 글자를 입력할 때 사용하는 태그이다.
<body>
<form>
<textarea></textarea>
</form>
<body>
| 속성 이름 | 설명 |
| cols | 태그의 너비를 지정함 |
| rows | 태그의 높이를 지정함 |
select 태그
여러 개의 목록에서 몇 가지를 선택할 수 있는 입력 양식 요소이다.
| 태그 이름 | 설명 |
| select | 선택 양식을 생성 |
| optgroup | 옵션을 그룹화함 |
| option | 옵션을 생성 |
fieldset 태그 / legend 태그
입력 양식을 설명할 때 사용한다.
legend태그는 fieldset태그 내부에서만 사용할 수 있다.
공간 분할 태그
div 태그와 span 태그
| 태그 이름 | 설명 |
| div | block 형식으로 공간을 분할 |
| span | inline 형식으로 공간을 분할 |
block 형식의 태그와 inline 형식의 태그
| block 형식 태그 | inline 형식 태그 |
| div 태그 | span 태그 |
| h1 태그 ~ h6 태그 | a 태그 |
| p 태그 | input 태그 |
| 목록 태그 | 글자 형식 태그 |
| 테이블 태그 | |
| form 태그 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1> div와 span 태그</h1>
<h1> div는 블록영역, span 인라인 영역</h1>
<div> 첫번째 영역 </div><div> 두번째 영역</div>
<span>세번째 영역</span><span>네번째 영역</span>
<hr>
<h2>HTML4의 웹구조(div와 span태그를 이용하여 영역을 구분)</h2>
<div id="header">
<center><h1>KH 정보교육원</h1></center></div>
<hr>
<div id = "menu">
<span>html</span>
<span>css</span>
<span>javascript</span>
<span>jQuery</span>
</div>
<hr>
<div id = "content">
<p>HTML 쉬운척하더니 어려움</p>
<p>광고영역</p>
</div>
<hr>
<div id = "footer">
<span>회사소개</span>
<span>인재채용</span>
<span>제휴</span>
<span>이용약관</span>
<span>개인정보처리방침</span>
</div>
<hr><hr>
<h1>HTML5 시멘틱 구조</h1>
<header>
<center><h1>KH 정보교육원</h1></center>
<hr>
<nav>
<span>html</span>
<span>css</span>
<span>javascript</span>
<span>jQuery</span>
</nav>
</header>
<section>
<article>
<p>HTML 쉬운척하더니 어려움</p>
</article>
<aside>
<p>광고영역</p>
</aside>
</section>
<hr>
<footer>
<span>회사소개</span>
<span>인재채용</span>
<span>제휴</span>
<span>이용약관</span>
<span>개인정보처리방침</span>
</footer>
</body>
</html>
div와 span 태그
div는 블록영역, span 인라인 영역
세 번째
영역 네 번째 영역
HTML4의 웹 구조(div와 span태그를 이용하여 영역을 구분)
KH 정보교육원
HTML 쉬운척하더니 어려움
광고 영역
HTML5 시멘틱 구조
KH 정보교육원
HTML 쉬운척하더니 어려움
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action = "/action_page.html"
method = "post">
고객명 : <input type ="text" name = "id"><br><br>
전화번호(필수) : <input type = "text" name ="phone" required>
<br><br>
E-mail : <input type = "email" name ="email"><br><br>
피자선택(필수) :
<select name ="pizza">
<option value="1" selected>피자를 선택하세요 </option>
<option value="2">맛있는 피자</option>
<option value="3">더욱 맛있는 피자</option>
<option value="4">매운 피자</option>
</select>
<br><br>
<fieldset>
<legend required>피자 사이즈(필수)</legend>
<input id = "Small" type = "radio" name ="사이즈" value ="Small">Small
<br><br>
<input id = "Medium" type = "radio" name ="사이즈" value ="Medium">Medium
<br><br>
<input id = "Large" type = "radio" name ="사이즈" value ="Large">Lage
<br><br>
</fieldset>
<fieldset>
<legend>토핑</legend>
<input type ="checkbox" name="토핑" value="베이컨">베이컨<br><br>
<input type ="checkbox" name="토핑" value="치즈">치즈<br><br>
<input type ="checkbox" name="토핑" value="양파">양파<br><br>
<input type ="checkbox" name="토핑" value="버섯">버섯<br><br>
희망 배송 시간 : <input type ="time"><br><br><br>
배송시 요청사항 : <textarea rows="3" cols ="15"></textarea>
<br><br>
<button type ="submit">주문하기</button><br>
</fieldset>
<br><br><br><br><br><br><br><br><hr>
<fieldset>
<legend>납품자 정보</legend>
<ol>
<li>납품자명(필수) : <input type ="text" name="납품자명" required></li>
<br>
<li>email(필수) : <input type ="email" placeholder=
"answer@naver.com" required></li>
<br>
<li>홈페이지 : <input type ="text" name="홈페이지" value="http://"></li>
<br>
<li>
지역 :
<select name = "지역">
<option value = "1"selected>부산</option>
<option value = "2">대구</option>
<option value = "3">대전</option>
<option value = "4">서울</option>
</select>
</li>
</ol>
</fieldset>
<br>
<fieldset>
<legend>납품 정보</legend>
<ul>
<li>상품명(필수) : <input type = "text" name = "상품명" required></li>
<br>
<li>납품수량(필수) : <input type = "text" name = "납품수량"
required></li>
<li>납품수량(필수) : <input type = "range" name = "납품등급"
max = "100" min = "1" value ="10" required>
</li><br><br>
<li>기타사항 : <textarea cols = "50" lows ="20"></textarea></li>
</ul>
</fieldset><br>
<button type = "summit">send message</button>
<br><br><br><br><hr>
<h1>회원가입</h1>
<p><b>가입할 회원 정보를 입력하세요</b></p>
<br>
아이디 : <input type = "text" name = "id" placeholder="아이디를 입력하세요" ><br>
비밀번호 : <input type = "password" name = "password" placeholder="비밀번호를 입력하세요" ><br>
비밀번호(re) : <input type = "password" name = "password" placeholder="비밀번호 재확인" ><br>
이름 : <input type = "text" name = "name" placeholder="이름을 입력하세요" ><br>
나이 : <input type = "text" name = "age" placeholder="나이를 입력하세요" ><br>
이메일 : <input type = email placeholder="이메일을 입력하세요" ><br>
폰번호 : <input type = "text" name = "phone" placeholder="폰번호를 입력하세요" ><br>
주소 : <input type = "text" name = "id" placeholder="주소를 입력하세요" ><br>
성별 :
<input id = "M" type ="radio" name="gender" value="남"><label for="M">남자</label>
<input id = "F" type ="radio" name="gender" value="여"><label for="F">여자</label>
취미 :
<input type = "checkbox" name ="hobby" value="운동">운동
<input type = "checkbox" name ="hobby" value="음악">음악
<input type = "checkbox" name ="hobby" value="춤">춤
<input type = "checkbox" name ="hobby" value="맛집탐방">맛집탐방
<br><br>
<button type = "submit">가입하기</button>
<button type = "submit">취소</button>
</form>
<form method = "get"
action = https://search.naver.com/search.naver?>
검색 : <input type = "text" name = "query">
<input type = "submit">
</form>
</body>
</html>
'이공계전문기술연수 > HTML | CSS' 카테고리의 다른 글
| <이공계기술전문연수> 9. CSS 스타일 속성 기본(1)(크기, 색상, 가시, 박스, 테두리) (0) | 2019.09.19 |
|---|---|
| <이공계기술전문연수> 8. CSS 선택자 (0) | 2019.09.16 |
| <이공계기술전문연수> 6. HTML 입력 양식 태그 / form 태그 (0) | 2019.09.10 |
| <이공계전문기술연수> 5. HTML 이미지 태그 / 오디오 태그 / 비디오 태그 (0) | 2019.09.09 |
| <이공계전문기술연수> 4. HTML 테이블 태그(table tag) (0) | 2019.09.08 |
