HTML 양식은 사용자가 양식을 제출할 때 다른 유형의 사용자 입력을 수신하는 데 사용됩니다.
2. 형태의 작동 메커니즘 3. 양식 정의 (<form> </form> 태그)HTML 양식은 단위 유닛 요소를 포함하는 영역입니다. 양식에는 텍스트 필드, 확인란, 단일 선택 상자, 제출 버튼 등과 같은 입력 요소가 포함될 수 있습니다. 양식에는 메뉴, 텍스토리, 필드 셋, 범례 및 레이블 요소도 포함 할 수도 있습니다. <form> 요소는 블록 레벨 요소이며,이 요소는 전후에 할인을 생성합니다.
<양식 action = login.do method = post> <!-양식 요소는 여기-> </form>4. 형태 속성
조치 : 양식이 제출 될 때 양식 데이터가 전송되는 위치를 참조하십시오. 조치는 다음과 같습니다. 첫째, URL (Absolute URL/Relative URL)은 일반적으로 서버의 프로그램을 가리키며, 프로그램은 해당 처리를 위해 양식으로 제출 된 데이터 (예 : 테이블 단위의 요소 값)를 수신합니다. 예를 들어, <form action = http://www.xxx.com/login.do>, 사용자 가이 양식을 제출하면 서버는 일반 웹 사이트 http://www.xxx.com/ 일반 프로세스 프로그램을 실행합니다. 둘째, Mailto 프로토콜의 URL 주소를 사용하여 이메일 형식으로 양식 내용을 보내십시오. 방문자가 컴퓨터의 컴퓨터에 메일 전송 프로그램을 설치하고 올바르게 설정해야하기 때문에이 상황은 드 rare니다. 셋째, 빈 값, 동작이 비어 있거나 쓰여지지 않은 경우 현재 페이지에 제출 된 것을 의미합니다.
방법 :이 속성은 브라우저가 형식의 데이터를 서버 처리 프로그램에 제출하는 방식을 정의합니다. 방법의 값과 관련하여 가장 일반적으로 사용되는 것은 Get and Post입니다. 먼저 get 모드로 양식 데이터를 제출하십시오. 웹 브라우저는 각 양식의 형식 요소와 데이터를 URL 매개 변수 형식으로 지정된 URL 주소에 따라 첨부합니다 , GET에 의해 전송되는 데이터의 양은 일반적으로 1KB 미만으로 제한됩니다. 둘째, 포스트 메소드를 사용하여 브라우저는 HTTP 요청 본문의 일부로 양식 데이터를 서버로 보냅니다. 일반적으로, 포스트 방법에 의해 전송 된 데이터는 HTML 표준에 따라 GET 메소드에 의해 전송 된 데이터의 양보다 큽니다. get 방법 (예 : 쿼리)을 사용하면 양식 처리 결과가 서버에 저장된 데이터가 변경되면 게시물 (예 : 추가, 삭제 및 수정 작업)을 채택해야합니다. 셋째, 기타 방법 (헤드, 퍼팅, 삭제, 추적 또는 옵션 등). 실제로 초기 HTTP 표준은 다양한 작업에 해당하는 방법을 지정했지만 대부분의 경우 많은 경우에만 관찰되지 않았습니다.
대상 : 여기서이 속성은 동작 속성에 지정된 URL에 의해 리턴 된 URL의 결과를 지정합니다. 값은 _blank (새 창에서 열기), _ sel (동일한 프레임 워크, 기본값에서 열기), _parent (부모 프레임에서 열기), _ 상단 (전체 창에서 열기) 및 프레임 이름입니다 (지정된 내용) 프레임 워크 프레임은 중국에서 열린다).
제목 : 웹 사이트 방문자의 마우스가 양식의 어떤 위치에 있으면 작은 부표로 표시된 텍스트를 설정하십시오.
ENCTYPE : 서버로 전송하기 전에 양식 데이터를 인코딩하는 방법을 지정합니다. 값 : 기본값은 Application/X-WWW-Form-urlencoded입니다. 모든 문자는+ 증가 숫자로 변환됩니다 -Data : 문자 코드가 없습니다. 파일 업로드 컨트롤이 포함 된 양식을 사용하는 경우이 값을 사용해야합니다.
이름 : 양식의 이름. ID 속성의 차이점 : 이름 속성은 서버와의 통신 중에 사용되는 이름이며,이 속성은 주로 클라이언트 프로그래밍 및 JavaScript에서 사용되는 이름입니다. .
2. 테이블 단위 요소 1. 단일 텍스트 상자 <입력 유형 = 텍스트/> (입력 유형 속성의 기본값은 텍스트입니다)<입력 유형 = 텍스트 이름 = 이름/>
다음은 단일 라인 텍스트 상자의 주요 속성입니다.
<입력 유형 = 비밀번호 이름 = 이름/>3. 단일 버튼 <입력 유형 = 라디오/>
사용 방법 : 이름이 동일한 이름의 단일 선택 버튼을 사용하여 다른 값 값을 설정하여 별도의 판단없이 지정된 이름의 값을 선택하여 누가 선택했는지 알 수 있습니다. 라디오 버튼의 원소 값은 양식이 제출되면 선택한 항목의 값과 이름이 표시되고 값이 표시되지 않습니다.
<입력 유형 = 무선 이름 = 성별 값 = 남성/> <입력 유형 = 무선 이름 = 성별 가치 = 여성/>4. 점검 상자 <입력 유형 = checkbox/>
확인 버튼 그룹, 즉 동일한 이름의 동일한 체크 버튼 세트를 사용하여 검사 버튼 테이블 단위의 요소 값은 값 속성에 의해 명시 적으로 설정됩니다 이름은 포장되어 값으로 전송됩니다复选框的 wecked 属性表示是否被选中 属性表示是否被选中, <input type = checkbox checked /> 或者 <입력 유형 = checkbox checked = checked /> (推荐) 확인 된 、 readonly 等这种一个可选值的属性都可以省略属性值본질
<입력 유형 = 확인란 이름 = 언어 값 = java/> <입력 유형 = 확인란 이름 = laanguage value = c/> <입력 유형 = 확인란 이름 = Laanguage va lue = c#/>5. 숨겨진 도메인 <입력 유형 = 숨겨진/>
숨겨진 도메인은 일반적으로 사용자에게 표시 할 필요가없는 서버에 정보를 제출하는 데 사용됩니다.
<입력 유형 = 숨겨진 이름 = 숨겨진 도메인/>6. 파일 업로드 <입력 유형 = 파일/>
파일을 사용하면 Form의 ENCTYPE를 멀티 파트/양식 데이터로 설정해야하며 메소드 속성이 게시되어야합니다.
<입력 이름 = UPLODEDEDFILE ID = UPLODEDEDFILE 유형 = 파일 크기 = 60 acccept = 텍스트/*/>7. 당기기 상자 <select> 태그
<select> 라벨 목록 상자, <pllact> 레이블을 작성하여 목록 항목을 만들고 <select> Nested <plooxt>를 사용하여 일련의 옵션 세트를 공동으로 제공합니다.
<옵션 선택> 베이징> 또는 <옵션 select = selectd> 베이징 </옵션> (권장 메소드)을 선택 항목으로 설정할 수 있습니다. 선택을 달성하는 방법, <옵션 값 = -1>-선택한 <sollect>를 추가 한 다음 Select IF-1에서 선택한 선택한 값을 프로그래밍하는 것은 선택되지 않은 것으로 간주됩니다.
선택 그룹 옵션은 OptGroup을 사용하여 그룹 자체를 선택하지 않습니다.
<select> 마크 및 여러 속성을 선택할 수 있습니다 (CTRL 키를 누르십시오)
<select name = country size = 10> <optgroup label = africa> <옵션 value = gambia </옵션> <옵션 value = madagascar </옵션> <옵션> e = nam> namibia </옵션> </optgroup > <OptGroup Label = Europe> <옵션 값 = Fra> 프랑스 </옵션> <옵션 value = russia </옵션> <옵션 value = uk> uk> </옵션> tgroup> <optgroup label = North America> < 옵션 값 = can canada </옵션> <옵션 값 = mex> 멕시코 </옵션> <옵션 value = USA> </옵션> </oplct>8. 멀티 라인 텍스트 <TextRea> </textRea>
멀티 라인 텍스트 <TextArea> 멀티 라인 텍스트, <TextArea> 값 속성 없음, <TextRea> 텍스트 </textRea>, cols = 50, 행 = 15 속성을 나타내는 텍스트 상자 생성 , 브라우저가 기본 디스플레이를 가져옵니다.
<TextArea name = textAreacontent 행 = 20 Color = 50> 멀티 라인 텍스트 상자의 초기 표시 내용 </textArea>9. <라벨> </label> 레이블
<input type = text> 이전에 수정할 수있는 일반 텍스트를 작성할 수 있지만 수정 자 텍스트를 클릭하면 입력이 초점을 맞추지 않지만 레이블을 사용할 수 있습니다 u (이해). AccessKey = u, 레이블의 또 다른 속성. 참고 : 수정 된 컨트롤을위한 고유 ID를 설정합니다. <label> </label>의 두 레이블은 <input type = radio/> 및 <input type = checkbox/>에 매우 유용하다고 생각합니다.
<입력 유형 = 무선 이름 = 섹스 ID = 남성 값 = 0 점검 = 확인 /> <레이블 for = male> male < /law> <입력 유형 = 무선 이름 = fmale value = 1 /> <label for = fmale> female </label> <입력 유형 = 무선 이름 = 성 ID = 비밀 값 = 2/> <레이블에 대한 = 비밀> 기밀 </label>10. <fieldset> </fieldset> 레이블
FieldSet 태그는 영역에서 컨트롤을 나누고 더 규칙적으로 보입니다.
<fieldset> <전설> 취미 </범죄> <입력 유형 = Checkbox value = basketball/> <입력 유형 = 확인란 값 = 산악 등반/<입력 유형 = Checkbox value = reading/> </f ildset>11. 제출 버튼 <입력 유형 = 제출/>
사용자가 <inputt type = submit/>로 지정된 서버 처리 프로그램을 클릭하면 양식 데이터가 <come> 레이블의 동작 속성으로 지정된 서버 처리 프로그램에 제출됩니다. 중국어의 기본 버튼 텍스트는 값 속성 수정 버튼의 표시 텍스트입니다.
<입력 유형 = 제출 값 = 제출/>12. 재설정 버튼 <입력 유형 = 재설정/>
사용자가 <input type = reset/> 버튼을 클릭하면 양식의 값이 초기 값으로 재설정됩니다. 사용자가 양식을 제출하면 재설정 버튼의 이름과 값이 서버에 제출되지 않습니다.
<입력 유형 = 재설정 값 = 재설정 버튼/>13. 일반 버튼 <입력 유형 = 버튼/>
보통 버튼은 일반적으로 스크립트 코드를 실행하기 위해 클릭하는 데 사용됩니다.
<입력 유형 = 버튼 값 = 일반 버튼/>14. 이미지 버튼 <입력 유형 = 이미지/>
이미지 버튼의 SRC 속성은 값 속성이없는 이미지 소스 파일을 지정합니다. 이미지 버튼은 <입력 유형 = 제출/>를 대체 할 수 있으며 이제 <입력 유형 = 제출/> 버튼을 그림에 직접 설정할 수도 있습니다.
<입력 유형 = 이미지 src = bg.jpg />셋째, 형식 예제
이 예제는 양식을 사용하여 양식 레이아웃을 사용하여 구현 된 간단한 등록 페이지입니다.
<! doctype html public- // w3c // dtd html 01 과도기 // en http : // > 너비 : 450px; } </style> <body style = background-images (/image/bearjpg); post> <table elign = Center Cellspacing = 0 CellPadding = 0> <td> username : </td> <입력 유형 = text/</tr> </tr> <tr> <td> 암호 : </td> < TD> <입력 유형 = 비밀번호/> </td> </tr> <tr>/</td> </tr> <l> <td> 시장을 선택하십시오 : </td> <d> <elect> <OptGroup Label = China> <pllose> Gansu Province </옵션> <pluxce> Henan Province Henan Province </옵션> <sollite> 상하이 </옵션> </optgroup> <optgroup label = American> <pllion> 캘리포니아 </ 옵션> <옵션> 시카고 </옵션> <sollite> 뉴스 on> </optgroup> </select> </td> </tr> <td> 성별을 선택하십시오 : </td> <td> <입력 유형 = 라디오 이름 = 섹스 ID = 남성 가치 = 0 점검 = 확인/>> <레이블에 대한 = male> male </lable> <입력 유형 = 무선 이름 = 섹스 ID = 1/> <레이블에 대한 = fmale> 여성 </label > <입력 유형 = 무선 이름 = 섹스 ID = 비밀 VA Lue = 2/> <레이블에 대한 = 비밀> 기밀 </label> </td> </tr> <td> 직업을 선택하십시오 : </td> <입력 유형 = 라디오 ID = 학생 이름 = 직업 /> <레이블에 대한 = 학생> 학생 < /label> <입력 유형 = 라디오 ID = 교사 이름 = 직업 /> <라벨에 대한 = 교사> <입력 유형 = 라디오 ID = 기타 이름 = 직업/> <레이블에 대한 레이블 = 기타> 다른 사람 </label> </td> </td> <td> 취미를 선택하십시오 : </td> <fieldset> <Legend> 취미 </LEGEND> <입력 type = checkbox name = Hobby id = basketboll checkd = checked /<label for = basketboll> 농구 재생 < /label> <입력 유형 = 확인란 이름 = Hobb y id = run /> <레이블 < /label > <입력 유형 = Checkbox Name = Hobby ID = 읽기 /> <레이블에 대한 = 읽기> read> <입력 유형 = 확인란 이름 = Hobby ID = 서핑 /> <레이블에 대한 = 서핑> 인터넷 액세스 < /label > </fieldset> </td> </td> <l> <td> 비고 : </td> <textarea color = 30> 이것은 내용입니다 </textarea> </td> </tr> tr> <td> & nbsp; html>