HTML 양식

폼은 동적 웹페이지를 구현하기 위한 주요 외부 폼입니다.

양식 및 양식 필드에는 입력 기능이 없으며, 양식 웹 페이지 제작은 궁극적으로 테이블별로 구성되어야 합니다.

HTML 형식은 HTML 페이지와 브라우저 간의 상호 작용을 위한 중요한 수단입니다. 양식은 고객이 제출한 관련 정보를 수집하는 데 사용될 수 있습니다.

양식은 웹사이트를 탐색할 때 자주 접하게 되며 웹사이트의 대화형 기능에서 중요한 부분입니다. ASP, PHP, JSP 등 웹 사이트의 대화형 기능을 구현하기 위해 웹 사이트에서 사용하는 언어 형식에 관계없이 양식은 통합된 외부 형식이 되었습니다.

HTML 양식(Form)은 HTML의 중요한 부분으로, 주요 기능은 정보 수집, 특히 방문자 정보 수집입니다.

HTML 양식을 배울 때 숙달해야 할 세 가지 핵심 사항은 다음과 같습니다.

· 양식 컨트롤

· 액션

· 방법

먼저 HTML 양식의 다양한 컨트롤을 통해 사용자가 텍스트 정보를 입력하고 옵션을 선택하고 작업을 제출할 수 있는 방법에 대해 이야기해 보겠습니다. 예를 들어, 위의 예 문장에서 input type="text"는 한 줄 입력 상자를 나타내는 양식 컨트롤입니다.

양식에 사용자가 입력한 정보는 항상 프로그램에서 처리되어야 합니다. 양식의 작업은 양식 정보를 처리하는 파일을 지정합니다. 메소드는 폼 정보를 보내는 방식을 나타냅니다. 메소드에는 get과 post라는 두 가지 값이 있습니다. get 메소드는 폼 컨트롤의 이름/값 정보를 인코딩하여 URL(주소 표시줄에서 확인 가능)을 통해 전송하는 것입니다. Post는 http를 통해 양식 콘텐츠를 전송하며 주소 표시줄에서 양식 제출 정보를 볼 수 없습니다. 그렇다면 언제 get을 사용하고 언제 post를 사용합니까? 일반적으로 단순히 데이터를 얻고 표시하는 것이라면 get을 사용하고, 데이터를 저장하고 업데이트하는 경우에는 post를 사용하는 것이 좋습니다.

HTML 양식(Form)의 공통 컨트롤(Controls)

HTML 양식(Form)의 공통 컨트롤은 다음과 같습니다.

양식 컨트롤                                                                      입력 유형="제출"

입력 유형="체크박스"

<🎜 🎜> <<> 입력 유형 = "Radio">

드롭 다운 상자 <🎜 🎜> <🎜 🎜> TextArea 텍스트는 *) <🎜 <🎜로 표시됩니다. >

한 줄 텍스트 입력 상자를 사용하면 사용자가 간단한 한 줄 정보를 입력할 수 있습니다. , 사용자 이름 등. 예문은 다음과 같습니다.

양식 제어 ): 체크박스(입력 유형="체크박스")체크박스를 사용하면 사용자가 옵션 세트에서 여러 옵션을 선택할 수 있습니다. 샘플 코드:

<input type="checkbox" name="fruit" value ="orange">orange<br><input type="checkbox" name="fruit" value ="mango">mango<br>

기본적으로 선택되어 있는 옵션을 나타내려면 선택 항목을 사용하세요.

<input type="checkbox" name="fruit" value ="orange" selected>주황색<br>

양식 컨트롤: 라디오 버튼(입력 유형="radio")

라디오 버튼을 사용하면 사용자가 옵션 집합에서 하나의 옵션만 선택할 수 있습니다. 샘플 코드:

<input type="radio" name="fruit" value = "Apple">Apple<br>

<input type="radio" name="fruit" value = "망고">망고<br>

기본적으로 선택되어 있는 옵션을 나타내려면 선택 항목을 사용하세요.

<input type="radio" name="fruit" value = "Orange" 선택됨>주황색<br>

양식 컨트롤: 드롭다운 상자(선택)

드롭다운 상자(선택)는 라디오 선택과 체크 선택 모두에 사용할 수 있습니다. 단일 선택 예문은 다음과 같습니다.

<select name="과일" >
<옵션 값="사과">사과
<옵션 값="오렌지">주황
<옵션 값=" mango">Mango
</select>

체크 셀렉션으로 바꾸고 싶다면 여러개 추가하면 됩니다. 사용자는 Ctrl을 사용하여 다중 선택을 구현합니다. 예:

<select name="fruit" multiple>

사용자는 크기 속성을 사용하여 드롭다운 상자의 크기를 변경할 수도 있습니다. (선택하다).

양식 제어: 여러 줄 입력 상자(텍스트 영역)

여러 줄 입력 상자(텍스트 영역) ) 주로 긴 문자 메시지를 입력하는 데 사용됩니다. 예문은 다음과 같습니다.

<textarea name="yoursuggest" cols ="50"rows = "3"></textarea>

여기서 cols는 다음을 나타냅니다. 텍스트 영역의 너비, 행은 텍스트 영역의 높이를 나타냅니다.

양식 컨트롤: 비밀번호 입력 상자(input type="password")

비밀번호 입력 상자(input type="password") ")은 주로 비밀번호와 같은 일부 기밀 정보를 입력하는 데 사용됩니다. 사용자가 입력할 때 표시되는 것은 입력 내용이 아닌 검은색 점 기호이기 때문입니다. . 예문은 다음과 같습니다.

<input type="password" name="yourpw">

양식 제어 ): 제출(input type="submit")

제출(input type=submit)하면 양식(Form)의 정보를 해당 작업이 가리키는 파일에 제출할 수 있습니다. 형태. 예문은 다음과 같습니다.

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

어떤 페이지를 페이지의 양식을 제출할 것인지 여부는 action 속성에 의해 설정됩니다.

그런 다음 <input type="submit"> 버튼을 클릭하여 해당 페이지로 이동하세요.

또한 <input type="button"> onClick 이벤트는 js 코드를 통해 양식 양식의 작업 속성 값을 재설정하여 다른 페이지로 이동합니다.