HTML Form
www.w3schools.com/html/html_forms.asp
HTML Forms
HTML Forms An HTML form is used to collect user input. The user input is most often sent to a server for processing. The Element The HTML element is used to create an HTML form for user input:
The element is a container for
www.w3schools.com
W3schools.com 요악 및 정리
더보기
내용
HTML Forms
HTML Forms
HTML Form Attributes
HTML Form Elements
HTML Input Types
HTML Input Attributes
HTML Input Form Attributes
▶ HtmlForm_1
<!DOCTYPE html>
<html>
<body>
<!-- HTML Forms
<form> 요소
사용자 입력을위한 HTML 양식을 만드는 데 사용
<input> 요소
<input type = "text"> 한 줄 텍스트 입력 필드를 표시합니다.
<input type = "radio"> 라디오 버튼을 표시합니다 (여러 선택 항목 중 하나를 선택).
<input type = "checkbox"> 확인란을 표시합니다 (여러 선택 항목을 0 개 이상 선택).
<input type = "submit"> 제출 버튼 표시 (양식 제출 용)
<input type = "button"> 클릭 가능한 버튼을 표시합니다.
<label> 요소
많은 폼 요소에 대한 레이블을 정의
화면 판독기 사용자에게 유용합니다. 사용자가 입력 요소에 집중할 때 화면 판독기가 레이블을 소리내어 읽어주기 때문
for의 속성 <label>태그는 같아야 id의 속성 <input> 들을 함께 바인딩 요소.
-->
<h2>HTML Forms</h2>
<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>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
<!-- 라디오 버튼 <input type="radio">
선택 항목 중 하나를 선택-->
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
<!-- 체크 박스 <input type="checkbox">
0 개 또는 추가 옵션을 선택-->
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
<!-- 제출 버튼
<input type="submit">폼 - 처리기 폼 데이터의 송신 버튼을 정의
<input>의 이름 속성
각 입력 필드에는 name제출할 속성이 있어야합니다 .
-->
<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>
<!-- HTML 양식 속성 -->
<!-- 타겟 속성
target속성 지정 여기서 양식을 제출하면 수신되는 응답을 표시
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe
-->
<form action="/action_page.php" target="_blank">
<!-- 여기에서 제출 된 결과는 새 브라우저 탭에서 열립니다. -->
<!-- 메서드 속성
method속성은 폼 데이터를 제출할 때 HTTP 메소드가 사용되도록 지정
양식 데이터는 URL 변수 (사용 method="get") 또는 HTTP 사후 트랜잭션 (사용 method="post") 으로 전송 될 수 있습니다 .
양식 데이터를 제출할 때 기본 HTTP 메소드는 GET입니다.
GET에 대한 참고 사항 :
양식 데이터를 이름 / 값 쌍으로 URL에 추가합니다.
GET을 사용하여 민감한 데이터를 보내지 마십시오! (제출 된 양식 데이터는 URL에 표시됩니다!)
URL의 길이는 제한되어 있습니다 (2048 자).
사용자가 결과를 북마크하려는 양식 제출에 유용합니다.
GET은 Google의 쿼리 문자열과 같은 비보안 데이터에 적합합니다.
POST에 대한 참고 사항 :
HTTP 요청 본문에 양식 데이터를 추가합니다 (제출 된 양식 데이터는 URL에 표시되지 않음).
POST에는 크기 제한이 없으며 많은 양의 데이터를 전송하는 데 사용할 수 있습니다.
POST를 사용한 양식 제출은 북마크 할 수 없습니다.
팁 : 양식 데이터에 민감한 정보 나 개인 정보가 포함 된 경우 항상 POST를 사용하십시오!
-->
<form action="/action_page.php" method="get">
<form action="/action_page.php" method="post">
<!-- 자동 완성 속성
autocomplete속성은 양식에 자동 완성 기능을 켜야하는지 여부를 지정
자동 완성이 켜져 있으면 브라우저는 사용자가 이전에 입력 한 값을 기반으로 자동으로 값을 완성
-->
<form action="/action_page.php" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email"><br><br>
<input type="submit">
</form>
<!-- Novalidate 속성
novalidate속성은 부울 속성
존재하는 경우 양식 데이터 (입력)를 제출할 때 유효성을 검사하지 않도록 지정합니다. -->
<form action="/action_page.php" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit">
</form>
<!-- HTML 양식 요소 -->
<!-- <input> 요소
type 속성 의 모든 다른 값은 다음 장인 HTML 입력 유형-->
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<!-- <label> 요소
여러 가지 형태의 요소에 대한 레이블을 정의
화면 판독기 사용자에게 유용 -->
<!-- <select> 요소
<select>요소는 드롭 다운 목록을 정의
미리 선택된 옵션을 정의하려면 옵션에 selected속성을 추가
-->
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<!-- 보이는 값 : 사용 size표시 값의 수를 지정하는 속성 -->
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<!-- 다중 선택 허용 :
multiple사용자가 둘 이상의 값을 선택할 수 있도록 하려면 속성을 사용
Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.-->
<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>
<!-- <textarea> 요소
<textarea>소자는 여러 줄의 입력 필드 (텍스트 영역)을 정의
rows속성은 텍스트 영역에 표시되는 줄 수를 지정
cols속성은 텍스트 영역의 가시 폭을 지정 -->
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
<!-- <button> 요소 -->
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<!-- <fieldset> 및 <legend> 요소
<fieldset>소자 형태로 그룹과 관련된 데이터를 저장하는 데 사용
<legend>요소는 캡션 정의 <fieldset> 요소를.
-->
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<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">
</fieldset>
</form>
<!-- <datalist> 요소
<datalist>요소는에서 미리 정의 된 옵션의리스트를 지정 <input>소자.
사용자는 데이터를 입력 할 때 미리 정의 된 옵션의 드롭 다운 목록을 볼 수 있습니다.
list의 속성 <input>요소는 참조해야 id의 속성 <datalist>요소-->
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<!-- <output> 요소
<output>(하나의 스크립트에 의해 수행 같은) 요소는 계산 결과-->
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
<!-- HTML 입력 유형
팁 :type 속성 의 기본값 은 "text"입니다.
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week"> -->
<form action="/action_page.php">
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
<input type="submit" value="Submit">
</form>
<!-- HTML 입력 속성 -->
<!-- value속성 -->
<form>
<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">
</form>
<!-- 읽기 전용 속성
입력 readonly속성은 입력 필드가 읽기 전용임을 지정 -->
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
<!-- 비활성화 된 속성
입력 disabled속성은 입력 필드가 비활성화되어야 함을 지정-->
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
<!-- 크기 속성
입력 size속성은 입력 필드의 보이는 너비 (문자)를 지정
본값 size은 20
이 size속성은 텍스트, 검색, 전화, URL, 이메일 및 비밀번호와 같은 입력 유형에서 작동
-->
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>
<!-- maxlength 속성 -->
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
<!-- 최소 및 최대 속성 -->
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
<!-- 다중 속성
multiple이메일, 파일 : 속성은 다음과 같은 입력 유형과 작동-->
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>
<!-- 패턴 속성
입력 pattern속성은 양식이 제출 될 때 입력 필드의 값이 검사되는 정규식을 지정
pattern속성은 텍스트, 날짜, 검색, URL, 전화, 이메일 및 비밀번호 입력 유형에서 작동-->
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
<!-- 자리 표시 자 속성
입력 placeholder속성은 입력 필드의 예상 값을 설명하는 간단한 힌트 (예상 형식에 대한 샘플 값 또는 간단한 설명)를 지정-->
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
<!-- 필수 속성
입력 required속성은 양식을 제출하기 전에 입력 필드를 채워야 함을 지정-->
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>
<!-- 단계 속성
입력 step속성은 입력 필드의 유효한 숫자 간격을 지정
예 : step = "3"인 경우 유효한 숫자는 -3, 0, 3, 6 등이 될 수 있습니다.-->
<form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</form>
<!-- 자동 초점 속성
input autofocus속성은 페이지가로드 될 때 입력 필드가 자동으로 포커스를 받도록 지정-->
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
<!-- 높이 및 너비 속성
입력 height및 width속성은 <input type="image">요소 의 높이와 너비를 지정합니다 .-->
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
<!--
목록 속성
입력 list속성은 <datalist><input> 요소에 대해 사전 정의 된 옵션을 포함 하는 요소를 참조합니다 . -->
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<!-- 자동 완성 속성
입력 autocomplete속성은 양식 또는 입력 필드의 자동 완성 기능을 켜거나 끌지 여부를 지정-->
<form action="/action_page.php" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
<!-- HTML 입력 양식 * 속성 -->
<!--
양식 속성
입력 form속성은 <input>요소가 속한 양식을 지정합니다 .
이 속성의 값은 해당 속성이 속한 <form> 요소의 id 속성과 동일해야 -->
<form action="/action_page.php" id="form1">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">
<!-- formaction 속성
입력 formaction속성은 양식이 제출 될 때 입력을 처리 할 파일의 URL을 지정
이 formaction속성은 제출 및 이미지 입력 유형에서 작동-->
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>
<!-- formenctype 속성
입력 formenctype 속성은 제출시 양식 데이터를 인코딩하는 방법을 지정합니다 (method = "post"인 양식에만 해당).-->
<form action="/action_page_binary.asp" method="post">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
<!-- formmethod 속성
입력 formtarget속성은 양식을 제출 한 후 수신 된 응답을 표시 할 위치를 나타내는 이름 또는 키워드를 지정-->
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
<!--
formnovalidate 속성
입력 formnovalidate속성은 <input> 요소가 제출 될 때 유효성을 검사하지 않아야 함을 지정합니다. -->
<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
<input type="submit" formnovalidate="formnovalidate"
value="Submit without validation">
</form>
<!--
novalidate 속성
novalidate속성은입니다 <form>속성.
존재하는 경우 novalidate는 제출시 모든 양식 데이터의 유효성을 검사하지 않도록 지정 -->
<form action="/action_page.php" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<!-- HTML 양식 https://www.w3schools.com/html/html_forms.asp
HTML 입력 양식 * 속성 https://www.w3schools.com/html/html_form_attributes_form.asp 까지 -->
'dev. > Publishing' 카테고리의 다른 글
| w3schools.com - HTML Tutorial (0) | 2021.02.18 |
|---|