사용자에게 정보를 얻을 수 있는 장치는 마련 사용자가 정보를 입력하면 다른 페이지나 서버로 전송 할 수 있도록 마련
->대화형컨트롤을 포함하는 문서 구획
<action>
양식 데이터를 처리할 프로그램의 URI. => 다른 페이지나 서버로 전송될 폼데이터의 최종 목적지 주소를 action에 넣음.
상대경로로 다른 파일로 연결할 수도 있음.
method
get: 받은 정보가 주소창에 노출이 됨. 검색어와 같은 것들이 사용되고 비밀번호와 같은 개인정보는 get을 사용하면 안됨
post: 주소창에 드러나지 않음.
<label>, <input>
enter your name : ---> label
쓸수 있는 창 ---> input
input 과 label이 쌍으로 움직임
인라인이기 떄문에 <div>로 묶음
<lable> 과 <input>을 사용하게 되면 꼭 for와 id를 함께 사용 하여야 함
<lable>의 자식요소로 <input>을 넣게 된다면 for 속성을 굳이 안해도 됨.
<lable>은 가능하면 접근성 측면에서 텍스트로 적어주는 것이 좋다.
<fieldset>
굉장히 많은 <input>과 <lable> 을 하나의 그룹으로 만들 수 있음
fieldset 로 묶으면 네모 테두리로 표현됨.
<legend>
부모 <fieldset> 콘텐츠의 설명을 나타냄 --> <fieldset>의 첫번째 자식이어야함.
<disabled>
모든 자손 컨트롤을 비활성화
<field disabled> 라고 하면 묶여있는 부분 모두 입력 불가
스타일링을 위해서 묶는다면 <fieldset> 보다는 <div>로 묶는게 더 좋음
<input> type 속성 - 텍스트 관련 유형
-한줄로만 입력 가능, 개행이 불가능
<minlength="숫자"> 입력 가능한 최소 글자수 최소 글자수가 안채워지면 알람이 자동으로 뜸
<maxlength="숫자"> 입력 가능한 최대 글자수 최대 글자수 이상으로 채워지면 더이상 안써짐.
email 같은경우에는 @이가 없으면 자동으로 인식해서 알람이 뜸.
<input> type 속성
range: 왼쪽이 0
오른쪽이 100
<placeholder>
플래이스홀더는 사용자가 편하고 정확하게 입력할 수 있도록 예시를 들어줄 수 있음.
회색으로 나타나지만 텍스트나 숫자를 입력하면 사라짐
<autocomplete> 양식 자동생성 기능(Form autofill) 암시
autocomplete"on" --> 전에 입력했던 정보들이 있다면 밑에 후보값으로 예시로 나오게됨
autocomplete"off" --> 자동완성 후보값이 나오지 않음
<required>
input 마지막에 required 를 작성하게 되면 공란이면 입력 해야한다고 알람이 뜸
공란이면 제출이 되지 않음
<disabled>
입력을 하지 못하게 막아놓음(마우스커서도 올라가지않음)
정보도 받아들이지 않음.
--> input 자체가 비활성화됨.
눈에 보이긴 하지만 정보가 받아들이지 않고 싶을때 사용
<readonly>
마우스 커서는 올라가긴 하지만 입력을 하지 못함 .
값을 value로 지정을 해놓고 readonly 사용 할 수 있음
disabled는 입력도 안되고 정보도 전송이 안되지만 redonly는 입력은 안되지만 정보 전송은 됨.
min, max, step
숫자에 관련된 속성
minimum 0, maximum 10
키보드로 숫자를 11이상의 숫자를 쓸 경우 알람이 뜸
step을 할 경우 step="@" @ 배수만큼 증가
number가 아니라
range 로도 사용 가능
<button>
input vs button
input은 따로 value를 설정 하지 않아도 초기화 제출이 보임 (value를 설정하면 그 설정값이 보임
<button> 같은 경우에는 </button>이 있어서 자식요소를 가질 수 있음.
자식 요소를 가질수 있기 때문에 <strong>과 같은 스타일 요소를 넣을 수 있음.
<input> 같은 경우에는 불가능
(css로 가능)
<select>
<option value="">--Please choose an option--</option required>
value 값을 적지 않아도 값이 입력됨. 그래서 required를 넣어서 필수로 선택 할 수 있도록 하고 please choose an option 칸에 value 값을 "" 공백 처리를 해서 정보가 받아들여지지 않아 선택 하라는 안내문구가 뜸
처음 option으로 쓰여진 please~~ 가 아닌 3번째 option 인 주토피아가 첫번째로 보여지도록 만들고 싶다면
selected를 사용해서 주토피아가 바로 나올 수 있도록 할 수있음
<optgroup>
option group
option 그룹으로 option을 그룹화 할 수 있고 lable을 통하여 이름을 붙여줄 수 있다.
<datalist>
다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 <option> 요소 여럿을 담는다.
입력창에 마우스 커서를 대면 입력한 option 값들이 예시로 나옴
<selected>와 다른점
- selected는 항목중에서만 선택을 할 수 있고 datalist는 항목을 선택 하고 거기서 키보드를 이용하여 수정 할 수 있다.
-예를 들면 토이만 써도 토이와 관련된 항목들이 예시로 뜸 (ex. 토이스토리 2,3
<textarea>
-<input> 타입 텍스트와 비슷하긴 하지만 <input>은 한줄밖에 입력 할 수 없지만 <textarea> 는 여러줄의 멀티라인 텍스트로 이용 할 수 있음.
-빈요소가 아니라 자식요소를 가질 수 있고 여러줄의 텍스트를 입력 할 수 있다
'제로베이스_정리' 카테고리의 다른 글
| 전역속성 (0) | 2024.04.12 |
|---|---|
| 메타데이터의 역할 <head> (0) | 2024.04.10 |
| 임베디드요소 (0) | 2024.03.19 |
| 목록과 표 (0) | 2024.03.19 |
| 구조를 나타내는 요소 (4) | 2024.03.17 |
