HTML 양식에 대한 포괄적인 지식

迷茫
풀어 주다: 2017-03-25 15:23:30
원래의
2514명이 탐색했습니다.

8.1 양식 태그

..... .< ;/form>

☟ 양식 속성:

action: 양식을 지정하는 데 사용되는 서버 프로그램으로, 양식이 제출되는 시기를 규정합니다. 양식 데이터를 언제, 어디로 보낼지. action의 값은 다음과 같습니다. 첫째, 일반적으로 서버 측의 프로그램을 가리키는 URL(절대 URL/상대 URL)입니다. 프로그램은 양식에서 제출된 데이터(즉, 양식 요소 값)를 수신하여 그에 따라 처리합니다. . 예:

사용자가 이 양식을 제출하면 서버는 "reg.ashx"라는 일반 핸들러를 실행합니다. 둘째, 양식 콘텐츠를 이메일로 보내는 mailto 프로토콜의 URL 주소를 사용합니다. 방문자의 컴퓨터에 이메일 전송 프로그램을 설치하고 적절하게 설정해야 하기 때문에 이러한 상황은 상대적으로 드뭅니다. 셋째, null 값입니다. 작업이 null이거나 기록되지 않으면 현재 페이지에 제출되었음을 의미합니다.

method: 이 속성은 브라우저가 양식의 데이터를 서버 핸들러에 제출하는 방법을 정의합니다. 가장 일반적으로 사용되는 것은 get 및 post이며, 기본적으로 get 메소드가 사용됩니다.

get과 post의 차이점은 무엇인가요?

① 데이터 쿼리: 예를 들어 포럼을 탐색할 때 URL에는 일반적으로 카테고리, 페이지 번호, 페이지당 레코드 수 등과 같은 정보가 포함됩니다. get 메소드를 이용하면 조회하고 싶은 정보(조건)를 한눈에 볼 수 있습니다. 포스트에서는 이런 정보를 숨기기 때문에 쿼리 조건을 확인하기가 불편합니다.

② 민감정보 제출(보안) : 이용자 등록, 이용자 정보 변경 등 기록을 변경하거나 추가하는 경우 URL에 추가된 get 메소드는 민감한 정보를 유출합니다. post 메소드는 민감한 정보를 숨길 수 있습니다.

데모:

get 메소드를 사용하여 제출을 클릭한 후: URL은 다음과 같습니다: php中文网/ashx/login.ashx?login_username=admin&login_pswd=123456

게시 메소드를 사용하여 클릭 제출 후: URL은 다음과 같습니다: php Chinese website/ashx/login.ashx ☜ 액션에 의해 지정된 URL일 뿐이며 매개변수가 URL에 추가되지 않음을 알 수 있습니다.

③ 빅데이터 텍스트 전달 : get은 쿼리에 편리하지만 URL에 첨부되기 때문에 각 브라우저에도 URL 길이 제한이 있습니다. IE: 2048자. Chrome과 FF에는 8182자가 있는 것 같습니다. 게시물에는 이러한 제한이 없는 것 같습니다.

◆ onsubmit: 양식 처리를 위한 스크립트 기능을 지정하는 데 사용됩니다.

◆ enctype: MIME 유형을 설정하며 기본값은 application/x-www-form-urlencoded입니다. 서버에 파일을 업로드해야 하는 경우 이 속성을 multipart/form-data로 설정해야 합니다

8.2 입력 태그

대부분의 양식 요소에서 사용할 수 있습니다. 입력 정의, 각 데이터를 식별하려면 양식 요소에 name 속성을 추가해야 하므로 name은 필수 속성입니다. name="Field name"

(1) 텍스트 상자 텍스트

입력 정보가 ​​일반 텍스트로 표시됩니다.

用户名: <input type="text" name="user" />
로그인 후 복사

다음은 한 줄 텍스트 상자의 주요 속성입니다.

name(스크립트에서 데이터를 얻기 위한 식별자로 사용할 수 있는 이름) , maxlength(텍스트 상자에 입력할 수 있는 최대 문자 수 설정), size(텍스트 상자 길이, 대략 바이트 단위)

값: 브라우저의 첫 번째 값인 텍스트 상자의 기본값을 지정합니다. 양식이 표시된 후 또는 사용자가 재설정 버튼을 클릭한 후 텍스트 상자에 표시되는 값입니다.

readonly: 읽기 전용 속성입니다. 읽기 전용 속성이 설정되면 텍스트 상자에 포커스가 부여되지만 사용자는 텍스트 상자의 값을 변경할 수 없습니다.

disabled: 텍스트 상자가 비활성화되면 포커스를 얻을 수 없습니다. 물론 사용자는 텍스트 상자의 값을 변경할 수 없습니다. 그리고 양식을 제출할 때 브라우저는 해당 텍스트 상자의 값을 서버로 보내지 않습니다.

(2)비밀번호 상자 비밀번호

입력한 문자를 "*" 또는 "●" 기호로 에코하여 재생합니다. 기밀유지 역할

密码: <input type="password" name="pwd" />
로그인 후 복사

(3) 숨김 도메인 숨김

숨겨진 도메인은 시청자에게 보이지 않습니다. 주로 여러 페이지에서 사용됩니다. 도메인

<input type="hidden" name="hid" value="域值">
로그인 후 복사

에 설정된 값(4) 파일 도메인 file

파일 도메인은 로컬 파일을 업로드할 수 있습니다. 서버 측에서는 파일 업로드에 대한 기본값이 없습니다. 이 기능을 사용할 때 form 태그에 method 속성을 지정해야 합니다. post로 메소드를 지정하기 위해 enctype 속성은 multipart/form-data로 지정됩니다. 그렇지 않으면 파일 콘텐츠를 업로드할 수 없습니다

<input type="file" name="photo">
로그인 후 복사

(5) 라디오 버튼 라디오

둥근 상자로 표시되는 옵션 세트에서 단일 선택

사용법: 라디오 선택 기능을 구현하려면 이름 값이 동일해야 합니다. 동일한 이름을 가진 라디오 버튼 그룹을 사용하고, 라디오마다 다른 값을 설정하면 별도의 판단 없이 지정된 이름의 값을 취하여 누가 선택되었는지 알 수 있습니다. 라디오 버튼의 요소 값은 value 속성에 의해 명시적으로 설정되며, 양식이 제출되면 명시적인 값 설정 없이 선택한 항목의 값과 이름이 패키지되어 전송됩니다.

아아아아

(6) 체크버튼 체크박스

在一组选项中进行多项选择,以一个方框表示

爱好: <input type="checkbox" name="hobby[m1]" value="music"/>音乐
<input type="checkbox" name="hobby[m2]" value="trip"/>旅游
<input type="checkbox" name="hobby[m3]" value="reading"/>阅读
로그인 후 복사

(7)提交按钮 submit

用于将表单内容提交到指定服务器处理程序或指定客户端脚本进行处理

<input type="submit" name="按钮名称" value="按钮显示文本">
로그인 후 복사

普通按钮 button

用于激发提交表单动作,配合JavaScript脚本对表单执行处理操作

<input type="button" value="按钮显示文本" onclick="javascript函数名" name="按钮名称">
로그인 후 복사

重置按钮 reset

用于清楚表单中所输入的内容,将表单内容恢复成默认的状态

<input type="reset" name="按钮名称" value="按钮显示文本">
로그인 후 복사

图像按钮 image

按钮外形以图像表示,功能与提交按钮一样,具有提交表单内容的作用

<input type="image" name="按钮名称" src="图像路径" width="宽" height="高">
로그인 후 복사

(8)选择列表标记