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

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)选择列表标记

8.1 选择列表：一次可以选择多个列表选项，且一次可以显示1个以上列表选项的选择列表

select 标记用于声明选择列表，option标记用于设置各个选项

<select name="列表名称" size="显示的选项数目(默认为1)" multiple="multiple"><!-- multiple设置列表中的项目可多选 -->
<option value="banana" selected="selected">香蕉</option><!-- selected设置默认选项，可设置多个 -->
<option value="apple">苹果</option>
<option value="watermelon" selected="selected">西瓜</option>
<option value="grape" selected="selected">葡萄</option>
</select>

8.2 下拉列表：一次只能选择一个列表选项，且一次只能显示一个列表选项的选择列表，即size默认1不能设置 size和 multiple属性

<select name="area">
<optgroup label="国外"> <!-- <optgroup> 标签用于组合选项，即给选项分组类别,属性为label,指定选项组合名称 -->
<option value="1">华盛顿</option>
<option value="2">旧金山</option>
</optgroup>
<optgroup label="国内">
<option value="3">广州</option>
<option value="4">湛江</option>
</optgroup>
</select>

(9)文本域标记

一般用于给用户填写备注信息或留言信息的多行多列文本区域

<textarea name="文本区域名称" rows="行数" cols="字符数">
...(此处输入的为默认文本，比如)请在此处输入备注信息
</textarea>

(10) 标签:为 input 元素定义标注（标记）

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

注意："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。即为下面说的隐式的联系。

隐式和显式的联系：

标记通常以下面两种方式中的一种来和表单控件相联系：将表单控件作为标记标签的内容，这样的就是隐式形式，或者为 标签下的 for 属性命名一个目标表单 id，这样就是显式形式。

显式的联系：

<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

隐式的联系：

<label>Date of Birth: <input type="text" name="DofB" /></label>

(11)fieldset 标签：把表单中元素组合起来，通俗的讲就是把表单围起来，顺便给个标题注释，看起来更规整。

基本语法：

...

...

demo：

<fieldset>
<legend>我最喜爱的:</legend>
<label for="computer">计算机</label> <input type="checkbox" value="1" id="fav" name="fav" />
<label for="trval">旅游</label> <input type="checkbox" value="2" id="fav" name="fav" />
<label for="buy">购物</label> <input type="checkbox" value="3" id="fav" name="fav" />
</fieldset>

위 내용은 HTML 양식에 대한 포괄적인 지식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!