웹 프런트엔드에서 양식의 역할은 무엇입니까?

양식에는 두 가지 기능이 있습니다. 1. 사용자의 경우 데이터 입력 및 제출을 위한 인터페이스입니다. 2. 웹사이트의 경우 사용자 정보를 얻는 방법입니다. 양식에는 세 가지 기본 구성요소가 있습니다. 1. 양식 데이터를 처리하는 데 사용되는 CGI 프로그램의 URL과 데이터를 서버에 제출하는 방법이 포함된 양식 태그, 2. 텍스트 상자가 포함된 양식 필드 비밀번호 상자, 숨겨진 필드 및 여러 줄 텍스트 상자 등 3. 제출 버튼, 재설정 버튼 및 일반 버튼을 포함한 양식 버튼은 서버의 CGI 스크립트로 데이터를 전송하거나 입력을 취소하는 데 사용됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, Dell G3 컴퓨터.

웹 프론트 엔드의 양식

웹 페이지에서 양식의 역할은 과소평가할 수 없습니다. 주로 데이터 수집 기능을 담당합니다. 방문객 주소, 설문지, 방명록 등을 기다려주세요.

양식의 역할:

• 사용자에게 양식은 데이터 입력 및 제출을 위한 인터페이스입니다.

• 웹 사이트의 경우 양식은 사용자 정보를 얻는 방법입니다.

양식에는 세 가지 기본 구성 요소가 있습니다.

• 양식 태그 <form></form>: 여기에는 양식 데이터를 처리하는 데 사용되는 CGI 프로그램의 URL과 서버 메소드에 제출된 데이터. <form></form>：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 

• 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

• 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

表单标签<form></form>

form标签用于创建供用户输入的HTML表单（表单域），以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

form表单域中可以包含各种交互控件--控件标签（文本字段、复选框、单选框、提交按钮等等），比如、、、等标签。

标签语法格式

<form action="提交地址" method="提交方式" name="表单名称">
    各种表单控件
</form>

method提交方式常用的4种：

get         一般用来查询信息
post        一般用来新增信息
put         一般用来修改信息
delete      一般用来删除信息

表单域和表单按钮

input标签

• input 输入的意思
• <input>标签为单标签
• type属性设置不同的属性值用来指定不同的控件类型
• 除了type属性还有别的属性

type="text"为普通输入框 value为里面的值 name和id会在写js的时候用

        &lt;input&gt;     

input标签的一些属性:

checked属性只有单选框和复选框才有

양식 필드: 텍스트 상자, 비밀번호 상자, 숨겨진 필드, 여러 줄 텍스트 상자, 확인란, 라디오 버튼 상자, 드롭다운 선택 상자 및 파일 업로드 상자 등을 포함합니다. 양식 태그 태그 구문 형식일반적으로 사용되는 4가지 제출 방법: 양식 필드 및 양식 버튼

type 속성은 다양한 속성 값을 설정하여 다양한 컨트롤 유형을 지정합니다type="text"는 일반 입력 상자, value는 내부 값, js 작성 시 name과 id가 사용됩니다.

        爱好： 
 
        抽烟<input> 
        喝酒<input> 
        烫头<input>

checked 속성은 라디오 버튼과 체크박스에만 사용할 수 있습니다.Attribute valueDescription

	양식 버튼: 서버의 CGI 스크립트로 데이터를 전송하거나 입력을 취소하는 데 사용되는 제출 버튼, 재설정 버튼 및 일반 버튼을 포함합니다. 양식 버튼은 정의된 처리 스크립트로 다른 처리 작업을 제어하는 ​​데에도 사용할 수 있습니다.
	양식 태그는 사용자 정보 수집 및 전달을 위해 사용자 입력을 위한 HTML 양식(양식 필드)을 만드는 데 사용됩니다. 서버에 제출되었습니다.	양식 양식 필드에는 , 과 같은 컨트롤 레이블(텍스트 필드, 확인란, 라디오 상자, 제출 버튼 등)이 포함될 수 있습니다. ; 및 기타 태그.
<input>	男 <input>          女 <input>
입력 태그	의미 입력 입력 중	<input> 태그는 단일 태그입니다
type 속성 외에도 다음이 있습니다. 기타 속성
입력 태그의 일부 속성:
Attribute
type	Text	한 줄 문자 입력 상자
	비밀번호	비밀번호 입력 상자
	라디오	라디오 버튼
	체크박스	체크박스
	버튼	보통 버튼
	제출	제출 버튼
	재설정	재설정 버튼
	이미지	제출 이미지 형태의 버튼

🎜🎜🎜파일🎜🎜 텍스트 필드 🎜🎜🎜🎜name🎜🎜🎜🎜🎜공간의 이름🎜🎜🎜🎜value🎜🎜🎜🎜🎜입력 컨트롤의 기본 텍스트 값🎜🎜🎜🎜size🎜🎜🎜🎜 🎜디스플레이 너비 페이지에 입력 컨트롤🎜🎜 🎜🎜checked🎜🎜🎜🎜🎜선택 공간에서 기본적으로 선택되는 항목을 정의합니다🎜🎜🎜🎜Maxlength🎜🎜🎜🎜🎜컨트롤에서 입력할 수 있는 최대 문자 수🎜 🎜🎜🎜

密码框

<input>

单选框

name相同的单选框智能选择一个

        男 <input> 
        女 <input>

复选框

多选框可以选取多个

        爱好： 
 
        抽烟<input> 
        喝酒<input> 
        烫头<input>

按钮

普通按钮可以根据需求来用js添加功能

提交按钮会把输入的表单信息提交到form表单的action地址

重置按钮会把表单信息重置为默认

        &lt;input&gt;         &lt;input&gt;         &lt;input&gt;     

下拉框标签

下拉框标签有点特殊，不是input的属性而是一个单独的标签

        <select>
            <option>山东</option>
            <option>北京</option>
            <option>江苏</option>
            <option>深圳</option>
            <option>上海</option>
        </select>

相关推荐：《html视频教程》

위 내용은 웹 프런트엔드에서 양식의 역할은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!