sugenius

w3schools.com - HTML Form 본문

dev./Publishing

w3schools.com - HTML Form

sugeniusk 2021. 2. 22. 18:54

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:

. form elements .
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

HtmlForm_1.pdf
0.50MB

<!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