form 이란?
사용자 입력을 수집하는 데 사용한다.
사용자 입력은 대부분 처리를 위해 서버로 전송됩니다.
<input>
<input>요소는 가장 많이 사용되는 form element 입니다.
속성 의 기본값 type은 "text"입니다.
type 정리
<input type="text"> 한 줄 텍스트 입력 필드를 정의
<input type="password"> 암호 필드 를 정의(별표 또는 원으로 표시됨).
<input type="submit"> form 처리기 에 양식 데이터를 제출하기 위한 버튼을 정의
<input type="reset"> 모든 양식 값을 기본값으로 재설정 하는 재설정 버튼 을 정의
<input type="radio"> 라디오 버튼을 정의
<input type="checkbox"> 확인란 을 정의
<input type="button"> 버튼을 정의
<input type="color"> 브라우저 지원에 따라 색상 선택기가 입력 필드가 나타난다
<input type="date"> 날짜를 포함해야 하는 입력 필드에 사용
<input type="datetime-local">시간대가 있 날짜 및 시간 입력 필드를 지정
<input type="email">이메일 주소를 포함해야 하는 입력 필드에 사용
<input type="image"> 이미지를 제출 버튼으로 정의
<input type="file"> 파일 선택 필드와 파일 업로드를 위한 "파일 선택" 버튼을 정의
<input type="hidden"> 숨겨진 입력 필드를 정의(사용자에게 표시되지 않음).
숨겨진 필드는 종종 양식을 제출할 때 업데이트해야 하는 데이터베이스 레코드를 저장합니다.
보안의 한 형태로 숨겨진 입력을 사용하지말자!
<input type="number"> 숫자 입력 필드 를 정의 합니다. 허용되는 번호에 대한 제한을 설정가능
<input type="range">정확한 값이 중요하지 않은 숫자를 입력하기 위한 컨트롤을 정의,허용되는 번호에 대한 제한을 설정가능
<input type="tel">전화번호를 포함해야 하는 입력 필드에 사용
<input type="time">사용자가 시간을 선택할 수 있습니다.
<input type="url">URL 주소를 포함해야 하는 입력 필드에 사용
action 속성
<input type="submit"> form 데이터를 form 처리기에 제출하기 위한 정의한다.
action속성이 생략되면 작업이 현재 페이지로 설정됩니다.
//제출할 때 양식 데이터를 "action_page.php"로 보냅니다.
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
target 속성
양식을 제출한 후 수신된 응답을 표시할 위치를 지정
<form action="/action_page.php" target="_blank">
method 속성
데이터를 제출할 때 사용할 HTTP 메서드를 지정
기본값은 GET입니다. (get post 차이점 확실히 알기)
<form action="/action_page.php" method="post">
name 속성
각 입력 필드에는 name제출할 속성이 있어야 합니다.
속성이 생략 되면 name입력 필드의 값이 전혀 전송되지 않습니다.
서버와 name 속성으로 대화한다고 생각하면 된다.
value 속성
입력 필드의 초기 값을 지정한다.
readonly속성
입력 필드가 읽기 전용임을 지정
읽기 전용 입력 필드는 수정할 수 없습니다
(그러나 사용자는 탭하여 강조 표시하고 여기에서 텍스트를 복사할 수 있습니다).
양식을 제출할 때 읽기 전용 입력 필드의 값이 전송
disabled속성
입력 필드가 비활성화되어야 함을 지정
비활성화된 입력 필드는 사용할 수 없으며 클릭할 수 없습니다.
비활성화된 입력 필드의 값은 양식을 제출할 때 전송되지 않습니다!
size속성
입력 필드의 표시 너비(문자)를 지정
기본값 20
input types: text, search, tel, url, email, and password 에서 유용하게 쓰인다.
maxlength속성
입력 필드에 허용되는 최대 문자 수를 지정
min및 max속성
입력 필드의 최소값과 최대값을 지정
pattern속성
양식이 제출될 때 입력 필드의 값이 확인되는 정규식을 지정
placeholder속성
입력 필드의 예상 값(샘플 값 또는 예상 형식에 대한 간단한 설명)을 설명하는 간단한 힌트를 지정합니다.
required속성
양식을 제출하기 전에 입력 필드를 채워야 함을 지정
step속성
입력 필드의 유효한 숫자 간격을 지정
autofocus속성
페이지가 로드될 때 입력 필드가 자동으로 포커스를 받도록 지정
<label> 태그
form element에 대한 레이블을 정의
스크린 리더는 사용자가 입력 요소에 포커스를 둘 때 라벨을 소리내어 읽어주기 때문입니다.(접근성 좋음)
<label>태그의 for속성 은 input요소의 id속성과 같아야 태그를 함께 묶을 수 있습니다.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
<select>태그
드롭다운 목록을 정의합니다 .
<option>은 선택할 수 있는 옵션을 정의합니다.
기본적으로 드롭다운 목록의 첫 번째 항목이 선택됩니다.
미리 선택된 옵션을 정의하려면 selected속성을 옵션에 추가합니다.
size속성을 사용하여 표시되는 값의 수를 지정
multiple속성을 사용하여 사용자가 둘 이상의 값을 선택할 수 있도록 합니다.
<!DOCTYPE html>
<html>
<body>
<h2>Allow Multiple Selections</h2>
<p>Use the multiple attribute to allow the user to select more than one value.</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br><br>
<input type="submit">
</form>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
</body>
</html><textarea>태그
여러 줄 입력 필드(텍스트 영역)를 정의합니다.
rows속성은 텍스트 영역에서 보이는 줄 수를 지정
cols속성은 텍스트 영역의 가시적 너비를 지정
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea><button>태그
버튼 정의
<button type="button" onclick="alert('Hello World!')">Click Me!</button>formenctype 속성
양식 데이터가 제출될 때 인코딩되는 방식을 지정합니다(method="post"가 있는 폼에만 해당).
<form>요소의 enctype 특성을 재정의
대표적으로 "multipart/form-data" 많이 사용한다.
'Web > HTML' 카테고리의 다른 글
| HTML 플러그인 (0) | 2023.01.03 |
|---|---|
| HTML 미디어 (0) | 2023.01.03 |
| HTML 기술 주의사항 (0) | 2023.01.02 |
| HTML 레이아웃 (0) | 2023.01.02 |
| HTML 기본 태그 정리 (0) | 2023.01.02 |