![[HTML] form(폼)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcXRPp6%2FbtriMJlV2mi%2FRXvGCMpzgwcRlmmXKjVhr1%2Fimg.jpg)
1. <form>
- 폼의 최상위 요소. 폼을 구성할 떄 정의
- 주요 속성 및 태그
action : 폼 서식에 작성한 값들을 처리할 서버 프로그램 주소
method : 작성된 값들의 전송 방식 설정(get, post)
<fieldset> : 여러 폼 요소들의 그룹화 범위 지정
<legend> : 그룹화 제목 표시
<input> : 그룹화 제목 표시
<textarea> : 여러줄로 된 텍스트 필드 생성
<select>, <option> : 선택 목록 정의, 목록 표시
<button> : <input type="button">과 기능적으로 같지만, 더 유연하게 표현 가능
2. <input type="">
요소의 type 값
text : 일반 텍스트
password : 비밀번호(*로 표시)
checkbox : 체크박스(중복 선택 가능)
radio : 라디오 버튼(중복 선택 불가)
submit : 전송 버튼
reset : 폼 안의 입력요소 값 초기화
button : 기본 버튼
image : 이미지 버튼
file : 파일 선택
hidden : 화면에 표시되지 않음 (기능은 정상 작동)
요소의 속성
name : 컨트롤의 이름 설정 (서버와의 데이터 처리 작업 시, 반드시 필요)
value : 컨트롤의 값
size : 컨트롤의 가로 크기
maxlength : 최대 입력 문자수 지정
checked : 체크박스, 라디오 버튼의 초기 선택 지정
disabled : 포커스, 선택, 변경 불가
readonly : 입력내용 변경 불가, 데이터 전송 가능
3. <textarea>
- name, disable, readonly : input 요소 속성과 동일
- rows : 표시 줄 수 지정 (브라우저에 보이는 줄 수 의미)
- cols : 표시 폭 지정(브라우저의 설정에 따라 차이가 있을 수 있음)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<!--
method="get" -> 데이터가 보여지면서 전달
method="poat" -> 데이터가 숨겨져서 전달
-->
<form action="html08-form01-res.html" method="post">
<fieldset>
<legend>회원가입</legend>
<p>아이디 : <input type="text" name="id"></p>
<p>비밀번호 : <input type="password" name="pw"></p>
<p>이메일 수신여부<br>
<input type="radio" name="radio" value="y">Yes<br>
<input type="radio" name="radio" value="n">No<br>
<!-- radio button은 1갬나 선택 가능! -->
</p>
<p>관심분야 : <br>
<input type="checkbox" name="cb1" valye="html">HTML<br>
<input type="checkbox" name="cb2" valye="css">css<br>
<input type="checkbox" name="cb3" valye="js">JavaScript<br>
<input type="checkbox" name="cb4" valye="jq">JQuery<br>
</p>
<p>
<input type="reset" value="취소">
<input type="button" value="그냥 버튼">
<input type="submit" value="전송">
</p>
<p>
<input type="file">
<input type="hidden" name="hd" value="my hidden value">
</p>
</fieldset>
</form>
<h1>select 요소</h1>
<form action="#" method="get">
<fieldset>
<legend>여러줄 글 상자와 목록상자</legend>
<p>
<label for ="reply">답글</label><br>
<textarea rows="3" cols="30" id="reply" name="re"></textarea>
</p>
<p>
과목선택
<select name="select01">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="jq">JQuery</option>
</select>
</p>
<p>
점심메뉴
<select name="select02">
<optgroup label="한식">
<option value="kimchi-zzigae">김치찌개</option>
<option value="bulgogi">불고기</option>
<option value="duenjang-zzigae">된장찌개</option>
<option value="samketang">감계탕</option>
</optgroup>
<optgroup label="분식">
<option value="jjolmean">쫄면</option>
<option value="dducnokki">떡볶이</option>
<option value="sundae">순대</option>
</optgroup>
</select>
</p>
<input type="submit" value="전송">
</fieldset>
</form>
</body>
</html>
'Web > HTML' 카테고리의 다른 글
| [HTML] 제목, 단락, 주소 (0) | 2021.11.28 |
|---|---|
| [HTML] 블록(block) 요소 & 인라인(inline) 요소 (0) | 2021.11.27 |
| [HTML] HTML의 구조 (0) | 2021.11.26 |
| [HTML] sementic(시멘틱) (0) | 2021.11.06 |
| [HTML] grouping - <div>, <span> (0) | 2021.11.05 |