정보실

웹학교

정보실

html HTML 양식

본문

양식은 웹 기술로 구축 된 페이지 또는 앱과 상호 작용할 수 있는 방법입니다.


제어 세트가 있으며 "제출"단추를 클릭하거나 프로그래밍 방식으로 양식을 제출하면 브라우저가 데이터를 서버로 보냅니다.


기본적으로 이 데이터 전송은 데이터가 전송 된 후 페이지가 다시 로드 되도록 하지만 JavaScript를 사용하여 이 동작을 변경할 수 있습니다.


양식은 양식 태그를 사용하여 작성됩니다.

<form>
	...
</form>

기본적으로 양식은 GET HTTP 메소드를 사용하여 제출됩니다. 어떤 단점이 있으며 일반적으로 POST를 사용하려고 합니다.


method 속성을 사용하여 제출할 때 POST를 사용하도록 양식을 설정할 수 있습니다.

<form method="POST">
	...
</form>


양식은 GET 또는 POST를 사용하여 상주 하는 동일한 URL로 제출됩니다.


양식이 https://365ok.co.kr/contacts 페이지에 있는 경우 "제출"버튼을 누르면 동일한 URL을 요청합니다.


아무 일도 일어나지 않을 수도 있습니다.


요청을 처리하기 위해 서버 측에 무언가가 필요하며 일반적으로 전용 URL에서 해당 양식 제출 이벤트를 "수신"합니다.


action 매개 변수를 통해 URL을 지정할 수 있습니다.

<form action="/new-contact" method="POST">
	...
</form>


이로 인해 브라우저는 POST를 사용하여 양식 데이터를 동일한 출처의 /new-contact URL에 제출합니다.


출처 (프로토콜 + 도메인 + 포트)가 https://365ok.co.kr (포트 80이 기본값) 인 경우 양식 데이터가 https://365ok.co.kr/new-contact로 전송됩니다.


웹 플랫폼에서 사용 가능한 일련의 제어를 통해 사용자가 데이터를 제공합니다.

  • input boxes (한 줄 텍스트)
  • text areas (여러 줄 문자)
  • select boxes (드롭 다운 메뉴에서 하나의 옵션을 선택)
  • radio buttions (표시되는 목록에서 하나의 옵션을 선택)
  • checkboxes (0, 하나 이상의 옵션 선택)
  • file uploads
  • 기타

다음 양식 필드 개요에서 각각을 소개하겠습니다.


input 태그 


input 필드는 가장 널리 사용되는 양식 요소 중 하나입니다. 또한 매우 다양한 요소이며 type 속성에 따라 동작을 완전히 변경할 수 있습니다.


기본 동작은 한 줄 텍스트 입력 컨트롤입니다.

<input />


다음을 사용하는 것과 같습니다.

<input type="text" />


다음에 나오는 다른 모든 필드와 마찬가지로 양식을 제출할 때 서버로 내용을 보내려면 필드 이름을 지정해야 합니다.

<input type="text" name="username" />


자리 표시 자 속성은 필드가 비어있을 때 밝은 회색으로 텍스트를 표시하는 데 사용됩니다. 입력 할 내용에 대한 힌트를 사용자에게 추가하는 데 유용합니다.

<input type="text" name="username" placeholder="Your username" />


Email 


type = "email"을 사용하면 제출하기 전에 클라이언트 측 (브라우저에서) 이메일의 정확성 (이메일 주소가 존재하지 않는 의미론적 정확성)을 검증합니다.

<input type="email" name="email" placeholder="Your email" />


Password 


type = "password"를 사용하면 입력 한 모든 키가 별표 (*) 또는 점으로 나타나 암호를 호스팅하는 필드에 유용합니다.

<input type="password" name="password" placeholder="Your password" />


Numbers 


입력 요소에 숫자만 허용하도록 할 수 있습니다.

<input type="number" name="age" placeholder="Your age" />


허용되는 최소 및 최대 값을 지정할 수 있습니다.

<input type="number" name="age" placeholder="Your age" min="18" max="110" />


step 속성은 다른 값 사이의 단계를 식별하는 데 도움이 됩니다. 예를 들어 5 단계에서 10에서 50 사이의 값을 허용합니다.

<input type="number" name="a-number"  min="10" max="50" step="5" />


Hidden field 


사용자가 필드를 숨길 수 있습니다. 제출 양식에 따라 서버로 계속 전송됩니다.

<input type="hidden" name="some-hidden-field" value="some-value" />


이는 일반적으로 보안 및 사용자 식별에 사용되는 CSRF 토큰과 같은 값을 저장하거나 특수 기술을 사용하여 스팸을 보내는 로봇을 탐지하는 데 사용됩니다.


양식과 해당 작업을 식별하는 데에도 사용할 수 있습니다.


기본값 설정 


이러한 모든 필드는 사전 정의 된 값을 승인합니다. 사용자가 변경하지 않으면 서버로 전송되는 값이 됩니다.

<input type="number" name="age" value="18" />


자리 표시자를 설정하면 사용자가 입력 필드 값을 지우면 해당 값이 나타납니다.

<input type="number" name="age" placeholder="Your age" value="18" />


양식 제출 


type = "submit"필드는 사용자가 한 번 누르면 양식을 제출하는 버튼입니다.

<input type="submit">


value 속성은 버튼에 텍스트를 설정하며, 누락 된 경우 "제출"텍스트를 표시합니다.


<input type="submit" value="Click me">


양식 검증 


브라우저는 클라이언트 측 유효성 검사 기능을 양식에 제공합니다.


필요에 따라 필드를 설정하고 필드를 채울 수 있으며 각 필드의 입력에 특정 형식을 적용 할 수 있습니다.


두 가지 옵션을 모두 보겠습니다.


필수입력 필드 설정 


필수 속성은 유효성 검사에 도움이 됩니다. 필드가 설정되지 않으면 클라이언트 측 유효성 검증이 실패하고 브라우저가 양식을 제출하지 않습니다.

<input type="text" name="username" required />


특정 형식 요구 


위의 type = "email"필드에 대해 설명했습니다. 사양에 설정된 형식에 따라 전자 메일 주소의 유효성을 자동으로 확인합니다.


type = "number"필드에서 최소 및 최대 속성을 언급하여 간격으로 입력 된 값을 제한합니다.


더 많은 것을 할 수 있습니다.


모든 필드에 특정 형식을 적용 할 수 있습니다.


pattern 속성은 값을 검증 할 정규식을 설정하는 기능을 제공합니다.


정규표현식 패턴


pattern=“https://.*” 

<input type="text" name="username" pattern="[a-zA-Z]{8}" />


기타 필드들


파일 업로드 


type = "file"입력 요소를 사용하여 로컬 컴퓨터에서 파일을 로드하고 서버로 보낼 수 있습니다.

<input type="file" name="secret-documents">


여러 파일을 첨부 할 수 있습니다.

<input type="file" name="secret-documents" multiple>


accept 속성을 사용하여 허용되는 하나 이상의 파일 형식을 지정할 수 있습니다. 이것은 이미지를 받아들입니다 :

<input type="file" name="secret-documents" accept="image/*">


application / json과 같은 특정 MIME 유형을 사용하거나 .pdf와 같은 파일 확장자를 설정할 수 있습니다. 또는 다음과 같이 여러 파일 확장자를 설정하십시오.

<input type="file" name="secret-documents" accept=".jpg, .jpeg, .png">


버튼 


type = "button"입력 필드를 사용하여 제출 단추가 아닌 추가 단추를 양식에 추가 할 수 있습니다.

<input type="button" value="Click me">


JavaScript를 사용하여 프로그래밍 방식으로 무언가를 수행하는 데 사용됩니다.


버튼으로 렌더링 되는 특수 필드가 있습니다. 특수 필드는 전체 양식을 지우고 필드 상태를 초기 상태로 되돌리는 것입니다.

<input type="reset">


라디오 버튼 


라디오 버튼은 선택 세트를 만드는 데 사용되며, 선택 버튼 중 하나를 누르고 다른 버튼은 모두 비활성화 됩니다.


이름은 이런 종류의 인터페이스를 가진 오래된 자동차 라디오에서 비롯됩니다.


이름 속성이 같고 값 속성이 다른 type = "radio"입력 세트를 정의합니다.

<input type="radio" name="color" value="yellow">
<input type="radio" name="color" value="red">
<input type="radio" name="color" value="blue">

양식이 제출되면 색상 데이터 속성에 단일 값이 있습니다.


항상 하나의 요소가 확인됩니다. 첫 번째 항목은 기본적으로 선택된 항목입니다.


checked 속성을 사용하여 미리 선택된 값을 설정할 수 있습니다. 라디오 입력 그룹당 한 번만 사용할 수 있습니다.


Checkboxes 


라디오 박스와 유사하지만 여러 값을 선택할 수 있습니다.


이름 속성이 같고 값 속성이 다른 type = "checkbox"입력 세트를 정의합니다.

<input type="checkbox" name="color" value="yellow">
<input type="checkbox" name="color" value="red">
<input type="checkbox" name="color" value="blue">

이러한 확인란은 모두 기본적으로 선택되어 있지 않습니다. checked 속성을 사용하여 페이지 로드시 활성화하십시오.


이 입력 필드는 여러 값을 허용하므로 양식 제출시 값이 배열로 서버에 전송됩니다.


Date and time 


날짜 값을 받아들이는 입력 유형이 몇 가지 있습니다.


type = "date"입력 필드를 통해 사용자는 날짜를 입력 할 수 있으며 필요한 경우 날짜 선택기를 표시합니다.

<input type="date" name="birthday">


type = "time"입력 필드를 통해 사용자는 시간을 입력 할 수 있으며 필요한 경우 시간 선택기를 표시합니다.

<input type="time" name="time-to-pickup">


type = "month"입력 필드를 통해 사용자는 월과 연도를 입력 할 수 있습니다.

<input type="month" name="choose-release-month">


type = "week"입력 필드를 통해 사용자는 주와 연도를 입력 할 수 있습니다.

<input type="week" name="choose-week">


이러한 모든 필드를 통해 범위와 각 값 사이의 단계를 제한 할 수 있습니다. 사용법에 대한 자세한 내용은 MDN을 확인하는 것이 좋습니다.


type = "datetime-local"필드를 사용하면 날짜와 시간을 선택할 수 있습니다.

<input type="datetime-local" name="date-and-time">


다음은 모두 테스트하는 페이지입니다. https://codepen.io/flaviocopes/pen/ZdWQPm 


Color picker 


type = "color"요소를 사용하여 사용자가 색상을 선택하도록 할 수 있습니다.

<input type="color" name="car-color">


value 속성을 사용하여 기본값을 설정합니다.

<input type="color" name="car-color" value="#000000">


브라우저는 사용자에게 색상 선택기를 보여줄 것입니다.


Range 


이 입력 요소는 슬라이더 요소를 보여줍니다. 사람들은 이것을 사용하여 시작 값에서 끝 값으로 이동할 수 있습니다.

<input type="range" name="age" min="0" max="100" value="30">


선택적 단계를 제공 할 수 있습니다.

<input type="range" name="age" min="0" max="100" value="30" step="10">


Telephone 


type = "tel"입력 필드는 전화 번호를 입력하는 데 사용됩니다.

<input type="tel" name="telephone-number">


tel over text를 사용하는 주요 판매 포인트는 모바일에서 사용되며 장치에서 숫자 키보드를 표시하도록 선택할 수 있습니다.

<input type="tel" pattern="[0-9]{3}-[0-9]{8}" name="telephone-number">


URL 


type = "url"필드는 URL을 입력하는 데 사용됩니다.

<input type="url" name="website">


패턴 속성을 사용하여 유효성을 검증 할 수 있습니다.

<input type="url" name="website"  pattern="https://.*">


textarea 태그 


textarea 요소를 사용하면 여러 줄로 된 텍스트를 입력 할 수 있습니다. 입력과 비교할 때 끝 태그가 필요합니다.

<textarea></textarea>


CSS와 행 및 col 속성을 사용하여 차원을 설정할 수 있습니다.

<textarea rows="20" cols="10"></textarea>


다른 양식 태그와 마찬가지로 name 속성은 서버로 전송 된 데이터의 이름을 결정합니다.

<textarea name="article"></textarea>


select 태그 


이 태그는 드롭 다운 메뉴를 만드는 데 사용됩니다.


사용자는 사용 가능한 옵션 중 하나를 선택할 수 있습니다.


각 옵션은 옵션 태그를 사용하여 작성됩니다. 선택에 이름을 추가하고 각 옵션에 값을 추가하십시오.

<select name="color">
	<option value="red">Red</option>
	<option value="yellow">Yellow</option>
</select>


옵션을 비활성화 할 수 있습니다 :

<select name="color">
	<option value="red" disabled>Red</option>
	<option value="yellow">Yellow</option>
</select>


하나의 빈 옵션이 있을 수 있습니다.

<select name="color">
	<option value="">None</option>
	<option value="red">Red</option>
	<option value="yellow">Yellow</option>
</select>


optgroup 태그를 사용하여 옵션을 그룹화 할 수 있습니다. 각 옵션 그룹에는 레이블 속성이 있습니다.

<select name="color">
	<optgroup label="Primary">
		<option value="red">Red</option>
		<option value="yellow">Yellow</option>
		<option value="blue">Blue</option>
	</optgroup>
	<optgroup label="Others">
		<option value="green">Green</option>
		<option value="pink">Pink</option>
	</optgroup>
</select>






페이지 정보

조회 48회 ]  작성일19-08-16 15:59

웹학교