HTML 양식은 사용자와 상호 작용하는 강력한 도구이지만 역사적, 기술적 이유로 이를 최대한 활용하는 방법이 항상 명확하지는 않습니다. 이 장에서는 구조부터 스타일, 데이터 처리부터 사용자 정의 위젯까지 HTML 양식의 모든 측면을 다룰 것입니다.
양식: 다양한 유형의 사용자 입력 데이터를 수집하여 서버로 전송하여 사용자와 서버 간의 데이터 상호 작용을 실현합니다.
양식 태그 양식은 데이터 수집 범위를 선언합니다. 양식에 있는 한 수집할 데이터입니다.
페이지에는 여러 개의 양식 태그가 있을 수 있으며 병렬 관계에만 있을 수 있고 중첩될 수 없습니다. 사용자가 서버에 데이터를 보낼 때 한 번에 한 가지 형식으로만 데이터를 제출할 수 있습니다. 여러 양식을 제출하려면 js에서 비동기 상호 작용을 사용해야 합니다.
<양식> 요소
HTML 양식은 사용자 입력을 수집하는 데 사용됩니다.
요소 정의 HTML 형식:
<form>.formelements.</form>
1. HTML 양식에는 양식 요소가 포함되어 있습니다.
양식 요소는 다양한 유형의 입력 요소, 확인란, 라디오 버튼, 제출 버튼 등을 나타냅니다.
(1) <입력> 요소
<input> 요소는 가장 중요한 양식 요소입니다. <input> 요소는 type 속성에 따라 다양한 형태를 갖습니다. 이 장에서 사용되는 유형은 다음과 같습니다.
(2) 텍스트 입력
<input type=text>는 텍스트 입력을 위한 한 줄 입력 필드를 정의합니다.
<!DOCTYPEhtml><html><body><form>성:<br><inputtype=textname=firstname><br>이름:<br><inputtype=textname=lastname></form><p>제발 양식 자체는 보이지 않습니다. </p><p>또한 텍스트 필드의 기본 너비는 20자입니다. </p></body></html>
제시된 결과는 다음과 같습니다.
(3) 라디오 버튼 입력
<input type=radio>는 라디오 버튼을 정의합니다. 라디오 버튼을 사용하면 사용자는 제한된 수의 옵션 중 하나를 선택할 수 있습니다.
<!DOCTYPEhtml><html><body><form><inputtype=radioname=sexvalue=1checked>남성<br><inputtype=radioname=sexvalue=2>여성</form></body></html>
제시된 결과는 다음과 같습니다.
(4) 제출 버튼
<input type=submit>은 양식 처리기에 양식을 제출하는 데 사용되는 버튼을 정의합니다. 양식 핸들러는 일반적으로 입력 데이터를 처리하기 위한 스크립트가 포함된 서버 페이지입니다. 양식 핸들러는 양식의 작업 속성에 지정됩니다.
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>성:<br><inputtype=textname=firstnamevalue=이><br>이름:<br><inputtype=textname=lastnamevalue= Lei ><br><br><inputtype=submitvalue=Submit></form><p>제출을 클릭하면 후속 처리를 위해 양식 데이터가 데모_form.ashx라는 페이지로 전송됩니다. </p></body></html>
제시된 결과는 다음과 같습니다.
2. 양식 속성:
(1) 액션 속성
action 속성은 양식이 제출될 때 수행할 작업을 정의합니다. 서버에 양식을 제출하는 일반적인 방법은 제출 버튼을 사용하는 것입니다. 일반적으로 양식은 웹 서버의 웹 페이지에 제출됩니다. 위의 예에서는 제출된 양식을 처리하기 위해 서버 스크립트가 지정되었습니다.
<formaction=action.php>
action 속성을 생략하면 현재 페이지로 action이 설정됩니다.
(2)메소드 속성
method 속성은 양식을 제출할 때 사용되는 HTTP 메서드(GET 또는 POST)를 지정합니다.
<formaction=action.phpmethod=GET>
또는:
<formaction=action.phpmethod=POST>
언제 GET을 사용하나요?
GET(기본 방법)을 사용할 수 있습니다. 양식 제출이 수동적(예: 검색 엔진 쿼리)이고 민감한 정보가 없는 경우입니다. GET을 사용하면 페이지 주소 표시줄에 양식 데이터가 표시됩니다.
action_page.php?firstname=Han&lastname=메이메이
참고: GET은 소량의 데이터를 제출하는 데 가장 적합합니다. 브라우저는 용량 제한(255자)을 설정합니다.
언제 POST를 사용하나요?
양식이 데이터를 업데이트하거나 민감한 정보(예: 비밀번호)를 포함하는 경우 POST를 사용해야 합니다. 페이지의 주소 표시줄에 제출된 데이터가 보이지 않기 때문에 POST가 더 안전합니다.
(3) 이름 속성
올바르게 제출하려면 각 입력 필드에 이름 속성 세트가 있어야 합니다. 이 예에서는 성 입력 필드만 제출합니다.
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>성:<br><inputtype=textvalue=lee><br>이름:<br><inputtype=textname=lastnamevalue=Lei >< br><br><inputtype=submitvalue=Submit></form><p>제출을 클릭하면 양식 데이터가 데모_form.ashx라는 페이지로 전송됩니다. </p><p>이 입력 요소에는 이름 속성이 없으므로 성은 제출되지 않습니다. </p></body></html>
제시된 결과는 다음과 같습니다.
3. 양식 컨트롤
양식 데이터를 <fieldset>과 결합
<fieldset> 요소는 관련 데이터를 양식으로 결합합니다. <legend> 요소는 <fieldset> 요소의 제목을 정의합니다.
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx><fieldset><legend>개인 정보:</legend>성:<br><inputtype=textname=firstnamevalue=Mickey><br > 이름:<br><inputtype=textname=lastnamevalue=Mouse><br><br><inputtype=submitvalue=Submit></fieldset></form></body></html>
양식은 다양한 컨트롤에 입력해야 하는 사용자 데이터를 수집하는 데 사용됩니다. HTML 컨트롤도 태그를 통해 구현되지만 몇 가지 특별한 모양을 제공하고 몇 가지 대화형 기능을 갖습니다.
HTML 양식에는 다음 표에 표시된 컨트롤이 포함될 수 있습니다.