- iframe (inline frame)
해당 웹 페이지 안에 제한 없이 또 다른 하나의 웹페이지를 삽입할 수 있다.
단, 정보보호를 위해 iframe 제한을 둔 사이트들은 새 창으로만 접근할 수 있다.
<iframe src = "삽입할 페이지 주소"> </iframe>
- form 태그
웹 페이지 내에서 사용자로부터 입력을 받은 후 데이터를 모아서 다른 페이지로 전송할 때 사용하는 태그
<form action = "데이터를 전송할 위치" method="전송방식(get/post)">
여러 입력들 (input, textarea,...)
</form>
- input 태그
사용자에게 입력받기 위해 사용하는 태그
<input type ="" placeholder = "" name ="" value = "">| maxlength | 값의 최대 길이 |
| size | 글 상자의 크기 (값의 길이 X) |
| placeholder | 사용자에게 어떤 값을 입력해야하는지 유도, 안내해주는 문자열 값 |
| readonly | 읽기전용, 수정할 수 없다. |
| value | 실제 값 |
| name | 해당 입력이 이름 (데이터 처리쪽에서 식별자 역할) |
| required | 필수 항목 |
- type 속성
text : 텍스트 입력
password : 비밀 번호 입력(입력 시 ****)
radio : 동그란 버튼 (중복으로 체크 불가 / name이 같은 것들끼리 세트)
checkbox : 네모난 버튼 (중복으로 체크 가능)
file : 파일 첨부 버튼 (form enctype 속성을 작성해 주어야 한다.)
enctype = "multipart/form-data"
color : 원하는 색상 선택
email : 이메일 입력 (@ 포함)
url : http:// https:// 포함해서 입력
tel : 휴대폰 번호 입력
date : 날짜 입력
number : 숫자크기를 조절하는 상하 버튼이 생긴 입력
range : 일정 범위 안의 값만 입력
search : 검색어 입력 / 입력 시 오른쪽 끝에 X 버튼 생김
button : 버튼 (아무 기능 없는 순수 버튼)
submit : 제출 버튼 / 속해있는 form의 모든 데이터들을 전송하며 입력 마무리
reset : 리셋 버튼
form, input 태그 사용 해보기 !
<html>
<head>
<meta charset="UTF-8">
<title>2_form</title>
</head>
<body>
<form action="3_join_db.html" method="get">
<p>
아이디<input type="text" size = "100" name = "userid"
maxlength ="12" value = "apple" readonly >
</p>
<p>
비밀번호 <input type="password" placeholder="비밀번호를 입력하세요." name="userpw" required>
</p>
<p>
성별 <br>
<!-- usergender 라는 이름으로 value "남","여" 중에 하나가 날라간다. -->
<input type = "radio" name = "usergender" value = "남"> 남 /
<input type ="radio" name = "usergender" value = "여"> 여
</p>
<p>
취미<br>
<input type = "checkbox" value = "영화보기" name = "userhobby"> 영화보기 /
<input type = "checkbox" value = "음악감상" name = "userhobby"> 음악 감상/
<input type = "checkbox" value = "코딩하기" name = "userhobby"> 코딩하기
</p>
<p>
파일첨부<input type ="file">
</p>
<p> <!-- 버튼에 쓰여진 value 속성값은 버튼에 새겨질 문자열 -->
제출하기<input type = "submit" value="회원가입">
일반버튼 <input type = "button" value = "일반버튼" onclick="window.alert('Hi');">
초기화 <input type = "reset" value = "이런망할">
</form>
</body>
</html>
'WEB > HTML,CSS' 카테고리의 다른 글
| DAY 10 : CSS, 선택자 (0) | 2022.01.21 |
|---|---|
| DAY 09 : progress, 시맨틱 태그 (0) | 2022.01.20 |
| DAY 07 : colgroup, 페이지 책갈피, 요소 (0) | 2022.01.17 |
| DAY 06 : 테이블, 병합, 캡션, thead, tbody, tfoot (0) | 2022.01.17 |
| DAY 05 : void 요소, 이미지 태그, 하이퍼 링크 (2) | 2022.01.13 |