form 태그
- 사용자와 웹어플리케이션(사이트)간의 상호 작용이 가능하도록 해주는 태그(기술)
- 사용자로부터 입력하는 데이터 형식을 제공하는 태그들을 묶어주는 태그이며 action속성에 지정된 페이지로 입력된 데이터를 전송하는 역할을 수행하는 태그
=> 전송되는 데이터는 서버측(JSP 등)에서 처리할 수 있음
- <form></form> 형식으로 사용하며 시작태그와 끝태그 사이에 또 다른 <form></form>태그가 올 수 없음
input 태그
- <form> 태그 안에서 추가되는 입력 요소들 중 가장 중요한 태그
- 사용자로부터 정보를 받아들이는 용도로 사용됨
- type이라는 속성을 이용해 다양한 입력 양식으로 변경하여 사용가능
<input type="text">
- 사용자로부터 한 줄의 텍스트를 입력받는 속성
<input type="number">
- 사용자로부터 숫자를 입력받는 속성
<input type="password">
- 사용자로부터 한 줄의 텍스트를 입력받는 속성(입력 데이터 숨김 처리)
<input type="checkbox">
- 사용자로부터 복수개의 항목을 체크하도록 하는 속성(체크박스)
<input type="radio">
- 사용자로부터 단일 항목을 선택하도록 하는 속성(라디오버튼)
=> 주의! name 속성값이 같은 항목끼리만 그룹화를 통해 단일 항목 선택이 가능하도록 변경됨
<input type="date">
- 사용자로부터 날짜를 선택하도록 하는 속성(캘린더 선택 또는 입력 가능)
<input type="button">
- 클릭 버튼 동작을 받도록 하는 속성(별도의 기능 연결 필요 - 자바스크립트 필요 / 주로 onclick=""을 사용 )
<input type="submit">
- 버튼과 동일하나 <form>태그 내의 입력 항목(데이터)들을 action 속성에 지정된 위치로 전송 및 이동하는 역할
<input type="reset">
- 버튼과 동일하나 <form> 태그 내의 입력 항목들에 입력된 데이터를 초기화하는 역할
select 태그
- 사용자로부터 option 태그에 지정된 항목을 선택하도록 하는 태그(셀렉트박스 또는 콤보박스)
- <select></select>태그 안에 <option></option>태그를 넣어서 항목을 추가 할 수 있음
- 사용법
<select name="emailDomain" onchange="checkEmail()">
<option value="">직접입력</option>
<option value="naver.com">naver.com</option>
<option value="daum.net">daum.net</option>
<option value="gmail.com">gmail.com</option>
</select>- 결과
textarea 태그
- 여러 줄을 입력받을 수 있는 태그
- 사용법
<textarea rows="8" cols="20"></textarea>- 결과
예시 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>test.html</h1>
<form action="test_result.html">
<!-- type="text" 속성 적용 시 키보드로 텍스트 입력이 가능한 입력창 표시 -->
<input type="text"><br>
<input type="text" placeholder="이름을 입력하세요"><br>
<!-- value 속성 적용 시 속성값에 해당하는 값을 입력창에 표시 -->
<input type="text" value="1"><br>
<!-- type="number" 속성 적용 시 숫자 입력만 가능한 입력창 표시 -->
<input type="number" value="1"><br>
<!-- readonly 속성 적용 시 데이터 입력 불가(읽기 전용) -->
<input type="text" value="홍길동" readonly="readonly"><br>
<!-- type="password" 속성 적용 시 텍스트 입력 내용 숨김 처리 -->
<input type="password"><br>
<hr>
취미 :
<input type="checkbox">등산
<input type="checkbox" name="programming"><label for="programming">프로그래밍</label>
<input type="checkbox" checked="checked">영화감상 <!-- 기본으로 체크되어 있음 -->
<br>
성별 :
<input type="radio" name="gender" value="male">남
<input type="radio" name="gender" value="female" checked="checked">여 <!-- 기본으로 선택되어 있음 -->
<!-- 남, 여 라디오버튼의 name 속성값이 동일("gender")하므로 그룹화(둘 중 하나만 선택됨) -->
<hr>
날짜 : <input type="date">
<input type="button" value="확인">
<hr>
직업 :
<select>
<option>직업을 선택하세요</option>
<option selected="selected">개발자</option>
<option disabled="disabled">건물주</option>
<option>아르바이트</option>
</select>
<hr>
<!-- 자기소개 : <textarea></textarea> -->
자기소개 : <textarea rows="8" cols="20"></textarea>
<hr>
<!-- submit 버튼 : form 태그의 action 속성에 지정된 URL(파일)로 이동하면서 폼 데이터 전송 -->
<input type="submit" value="가입">
<!-- reset 버튼 : form 태그 내의 입력 항목들을 초기화 -->
<input type="reset" value="초기화">
</form>
</body>
</html>예시 코드 | 결과
'Web > HTML' 카테고리의 다른 글
| HTML 따라하기 9일 차 | form의 GET방식과 POST방식 (0) | 2022.05.23 |
|---|---|
| HTML 따라하기 7일 차 | iframe (0) | 2022.05.20 |
| HTML 따라하기 6일 차 | 하이퍼 텍스트 링크 만들기 (0) | 2022.05.20 |
| HTML 따라하기 5일 차 | 이미지 만들기 (2) | 2022.05.19 |
| HTML 따라하기 4일 차 | 테이블 만들기 (0) | 2022.05.19 |