form
:사용자에게 입력 받아 데이터를 서버로 전송하는 영역
1. form 의 속성
- action
: form 내용을 전송할 주소 action="action.net" 형식으로 사용
- 속성이 없거나 action=""일 경우 현재 페이지로 데이터가 전송됨
- 속성이 없거나 action=""일 경우 자바스크립트 submit 이벤트 핸들러를 사용해 원하는 url로 전송 가능함. - method
: 입력 받은 내용을 서버에 전달하는 방식 method="post" 형식으로 사용
| get | method 속성이 지정되지 않았을 경우 기본값으로 데이터를 url 의 쿼리 문자열로 전송 |
| post | 데이터를 url의 쿼리 문자열로 전송 |
| dialog | 양식 영역이 대화상자를 닫고 데이터를 제출하거나, 양식을 지우지 않고, 제출 시 제출 이벤트가 시작되도록 함 대화 상자 안에 있는 웹 양식 영역의 데이터를 대화 상자의 반환 값으로 설정할 때 사용 |
- novalidate
: 유효성 검사를 하지 않고 데이터를 전송함.
- <input> 태그 안에 required 속성이 무시됨
- 기본적으로 올바른 형식으로 입력이 되었는지 확인을 하는 type="url", type="email" 의 유효성 검사를 하지 않음 - target
: 폼이 제출된후 결과를 표시할 위치를 지정 target="_blank" 혁식으로 사용
| _self | 기본값, 제출 결과가 현재 창이나 프레임에 표시 |
| _blank | 제출 결과가 새 창이나 새 탭에 표시 |
| _parent | 제출 결과가 부모 프레임에 표시됨, 프레임 구조가 없는 경우 _ self와 동일하게 동작 |
| _top | 제출 결과가 전체 창의 최상위 프레임에 표시됨. 프레임 구조가 없는 경우 _self와 동일하게 동작 |
- enctype
: method 속성이 post로 설정된 경우에 주로 사용
- 양싱에 포함된 컨트롤 요소들의 데이이터가 제출될 때 사용되는 인코딩 유형을 지정
enctype="text/plain" 형식으로 사용
| application/x-www-form-urlencoded | 기본값, 모든 문자들이 url 인코딩 되어 전송됨 기본적인 양식 데이터 인코딩 방식 |
| multipart/form-data | 파일 업로드를 지원 양식 데이터가 여러 부분으로 나뉘어 전송되며 각 부분은 자체적으로 인코딩 됨. type="file" 이 포함되어 있을 때 사용함 |
| text/plain | 양식 데이터가 일반 텍스트로 인코딩됨 |
2. <label> 라벨
: 인풋 박스의 제목 또는 설명요소로 인풋에 포커스 되었을때 스크린리터가 label을 읽어줌으로 웹접근성을 높여준다.
: checkbox, radio 버튼 선택시 for 와 id 가 연결 되어 있거나, label이 인풋 박스를 감싸고 있을 경우 라벨을 클릭하면
체크가 되기 떄문에 체크 영역을 넓혀주는 효과도 있다.
<!-- 사용 1 : 암묵적-->
<label>
아이디
<input name="userid">
</label>
<!-- 사용 2 : 명시적 for와 id에 동인한 이름을 사용하여 연결해 준다.-->
<label for="username">아이디</label>
<input id="username" name="userid">3. <input> 인풋
: 사용자의 입력을 직접 받는 영역으로 닫는 태그가 없다.
3-1. <input> 태그와 함께 사용 되는 속성
- name : 폼전송시 입력폼에 매칭되는 이름으로 사용하는 값
- placeholder : 값이 비어 있을때 보여주는 값: ex) '-' 빼고 번호만 입력
- required : 반드시 입력해야 하는 값, required로 설정된 인풋이 비어 있으면 전송이 되지 않는다.
- readonly : 폼의 입력을 막는 기능, 폼 전송시 기본값이 전달 된다.
- disabled : 폼의 입력을 막는 기능, 폼 전송시 값이 전송 되지 않는다.
- hidden : 사용자에게는 보이지 않아도 되지만 값을 전송해야 하는 경우에 사용된다.
- autocomplete : 자동완성 기능으로 폼이 전송될 때마다 입력한 값을 웹 브라우저에 저장해 두고, 나중에 인풋값을 입력할때
자동으로 추천해 준다.
사용법 링크
3-2. 인풋 태그 종류
1. 텍스트
: 문자를 입력 받을 수 있다. (기본값 이기는 하나 type="text" 지정해 주자!)
<input type="text">2. 비밀번호
: 입력내용을 가려야할때 사용
<input type="password">3. 데이트 : 날짜를 선택하여 입력 받을 수 있다.
<input type="date">4. 파일
: 업로드할 파일을 입력 받을 수 있다.
- accept 속성으로 허용할 확장자를 지정할 수 있다.
- multiple 속성이 추가 되면 여러개의 파일을 선택하도록 할 수 있다.
<input type="file" accept=".png,.jpg" multiple >5. 이메일
: 입력 받은 텍스트가 이메일 형식( abc@mail.com) 인지 자동으로 검사해 준다.
<input type="email">6. 숫자
: 숫자만 입력 받을 수 있다.
- 최소 최대값을 지정할 수 있다. (min, max)
- 증가,감소 할 양을 정할 수 있다. (step)
<input type="number"><input type="number" min="100" max="1000" step="10">
7.라디오
: 동그란 버튼 모양. 같은 name을 속성 가진 항목 중에서 하나만 선택 할 수 있다.
<label><input type="radio" name="gender" value="man">남</label>
<label><input type="radio" name="gender" value="women">여</label>8. 체크박스
: 네모난 버튼 모양. 여러개를 선택할 수 있다.
<label><input type="checkbox" value="apple">사과</label>
<label><input type="checkbox" value="banana">바나나</label>
<label><input type="checkbox" value="peach">복숭아</label>8. 범위
: 정해둔 범위 안에서 선택할 수 있다.
- value 값을 사용 하면 초깃값을 넣어 둘 수 있다.
- value 값이 없을 경우 중간값이 기본으로 표현되다.
<input type="range" min="1" max="10">나는 예쁜 편이다.
<input type="range" min="1" max="10" value="10" >9. 컬러 : 컬러파렛트를 사용해 컬러를 입력 받을 수 있다.
<input type="color">10. 옵션 선택 (드롭다운)
: 선택할 수 있는 드롭다운 리스트를 제공한다.
- 기본적으로 모든 옵션이 드롭다운 된다.
옵션 리스트가 많을 경우 html의 높이를 넘어가기도 한다.
<select>
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="peach">복숭아</option>
</select>10-1. select의 속성
- size
: 처음에 보이는 option의 갯수를 지정할 수 있다.
<select size="3">
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="peach">복숭아</option>
<option value="melon">멜론</option>
<option value="orange">오렌지</option>
</select>- multiple
:'shift' 또는 'ctrl'을 누른 상태로 여러개를 선택하게 할 수 있다.
<select multiple="multiple" size="3">
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="peach">복숭아</option>
<option value="melon">멜론</option>
<option value="orange">오렌지</option>
</select>10-2. 옵션 그룹
: 옵션을 카테고리로 설정할 수 있다. selected 속성으로 기본선택 요소를 둘 수 있다.
<select size="3">
<optgroup label="과일">
<option value="apple" selected>사과</option>
<option value="banana">바나나</option>
<option value="peach">복숭아</option>
<option value="melon">멜론</option>
<option value="orange">오렌지</option>
<optgroup label="채소">
<option value="onion">양파</tion>
<option value="carrot">당근</ption>
<option value="pumpink">호박<option>
</optgroup>
</select>11. 긴글 입력
: 인풋보다 긴글을 입력받을 수 있는 폼을 제공한다. 닫힘 태그를 사용한다.
- 너비를 지정하는 cols 의 기본값은 20이며, 평균 문자 너비를 양의 정수로 지정한 값이다.
여기서 평균 문자 너비는 영문을 기준으로 하여, 한글은 10자에서 줄바꿈이 된다.
- rows늘 줄수를 나타내며 기본값은 2이다, 지정한 갯수가 넘어가면 세로 스크롤이 표시된다.
- minlength와 maxlength로 최소 입력 글자수와 최대입력 글자수를 지정할 수 있다.
- div 태그로 감싸 너비와 높이를 100% 로 맞춰 박스크기를 설정할 수 있다.
이 경우 cols, fows는 사용하지 않는다.
- 입력되는 폰트 스타일을 지정할 수 없다.
<textarea cols="50" rows="10" minlength="0" maxlength="500" placeholder="최대 500자 입력"></textarea>12. 검색
: 검색이 필요한 텍스트를 입력 받음을 명시적으로 제공해줌
<input type="search">참고: HTML <input>
4. button 태그
: <button type="button">버튼</button> 형식으로 사용한다.
| 속성 | 설명 |
| submit | -기본속성은 "submit"이다. 그러므로 속성값 생략시 제출해야 할 폼이 없는 경우도 "submit" 일어나기 때문에 속성 지정을 하는 것 추천 |
| reset | 제출폼의 입력을 초기화 한다. |
| button | 아무 동작도 하지 않는다. 자바스크립트를 사용해 클릭시 이벤트를 컨트롤할때 사용한다. |
이외 속성 참고: HTML <button> 태그
'공부 메모 > html5' 카테고리의 다른 글
| 메타 태그 (1) | 2025.06.13 |
|---|---|
| html 다운로드 버튼 만들기 (0) | 2021.08.29 |