简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

뷰어와의 상호 작용, 양식 태그에 대한 기본 HTML 튜토리얼

零下一度
풀어 주다： 2017-05-12 13:57:01
원래의
1469명이 탐색했습니다.

1. 양식 태그를 사용하여 사용자와 상호작용

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>表单标签</title>
 6 </head>
 7 <body>
 8 <form>
 9       <label for="username">用户名:</label>
10       <input type="text"  name="username" id="username" value="" />
11       <label for="pass">密码:</label>
12       <input type="password"  name="pass" id="pass" value="" />    
13       <input type="submit" value="确定"  name="submit" />
14       <input type="reset" value="重置" name="reset" />
15 </form>  
16 </body>
17 </html>
로그인 후 복사

웹사이트는 어떻게 사용자와 상호작용합니까? 답은 HTML 양식(양식)을 사용하는 것입니다. 양식은 뷰어가 입력한 데이터를 서버로 전송할 수 있으므로 서버측 프로그램은 양식을 통해 전달된 데이터를 처리할 수 있습니다.

문법: 

<form method="传送方式" action="服务器文件">
로그인 후 복사

설명:

1.

: 태그는 로 시작하여 < /양식>끝.

2.action: PHP 페이지(save.php) 등 시청자가 입력한 데이터가 전송되는 곳입니다.

3.method: 데이터 전송(get/post) 방법입니다. post는 암호화된 전송이고, get은 주소 표시줄 전송, 즉 암호화되지 않은 전송입니다. 

<form    method="post"   action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" />
</form>
로그인 후 복사

참고:

1. 모든 양식 컨트롤 (텍스트 상자, 텍스트 필드, 버튼 , 라디오 버튼, 확인란 등)은

태그 사이에 배치되어야 합니다(그렇지 않으면 사용자가 입력한 정보가 서버에 제출되지 않을 수 있습니다!).

2. 메소드의 차이점: post/get 이 부분은 백엔드 프로그래머가 고려해야 할 사항입니다.

시도해 보세요: Editor의 8행에 있는

태그에 코드를 추가하세요. 

method="post" action="save.php"
로그인 후 복사

다음과 같은 코드를 입력하셨나요? >

뷰어와의 상호 작용, 양식 태그에 대한 기본 HTML 튜토리얼

텍스트: 텍스트 상자 비밀번호:

비밀번호 상자 raido: 라디오 버튼 체크박스: 체크박스 파일: 파일 선택 상자 제출: 제출 버튼

레이블의 텍스트를 클릭하면 "for" 속성을 사용하여 레이블을 다른 요소에 연결할 수 있습니다. "for" 속성 값은 요소와 연결되어야 합니다. "id" 속성 값은 동일합니다.

2. 텍스트 입력 상자, 비밀번호 입력 상자

 1 
 2 
 3 
 4 
 5 文本输入框、密码输入框
 6 
 7 
 8 
 9     账户: 
10     
11     

12     密码: 
13 
14  
15 
16
로그인 후 복사

사용자가 양식에 문자, 숫자 등을 입력하려고 할 때 텍스트 입력 상자가 사용됩니다. 텍스트 상자를 비밀번호 입력 상자로 변환할 수도 있습니다.

문법: 

<form>
   <input type="text/password" name="名称" value="文本" />
</form>
로그인 후 복사

1. 유형:

type="text"인 경우 입력 상자는

type=인 경우 "비밀번호", 입력 상자는 비밀번호 입력 상자입니다.

2. 이름: 백그라운드 프로그램

ASP 및 PHP에서 사용할 텍스트 상자의 이름을 지정합니다.

3. 값: 텍스트 입력 상자의 기본값을 설정합니다. (일반적으로 알림으로 사용됨)

예: 

<form>
  姓名：
  <input type="text" name="myName">
  <br/>
  密码：
  <input type="password" name="pass">
</form>
로그인 후 복사

브라우저에 표시되는

결과:

뷰어와의 상호 작용, 양식 태그에 대한 기본 HTML 튜토리얼

해 보세요: 양식에 이름과 비밀번호 입력 상자를 삽입하세요

1. 편집기의 10번째 줄에 코드를 입력하세요: 

<input  type="text"  name="myName" />
로그인 후 복사

2. 편집기의 13번째 줄에 코드를 입력하세요. : 

<input  type="password"  name="pass" />
로그인 후 복사

속성 사이에 하나 이상의 공백이 있습니다.

hidden은 숨겨진 입력 필드를 정의합니다.

image는 이미지를 제출 버튼으로 정의합니다.
number는 스피너 컨트롤이 있는 숫자 필드를 정의합니다.
password 비밀번호 필드를 정의합니다. 필드의 문자는 가려집니다.
라디오는 라디오 버튼을 정의합니다.
범위는 슬라이더 컨트롤을 사용하여 숫자 필드를 정의합니다.
재설정은 재설정 버튼을 정의합니다. 재설정 버튼은 모든 양식 필드를 초기 값으로 재설정합니다. ​​
검색 검색에 사용되는 텍스트 필드를 정의합니다.
제출 제출 버튼을 정의합니다. 제출 버튼은
text Default 서버로 데이터를 보냅니다. 사용자가 텍스트를 입력할 수 있는 한 줄 입력 필드를 정의합니다. 기본값은 20자입니다.
url은 URL에 사용되는 텍스트 필드를 정의합니다.

어떤 사람들은 현재 값이 거의 사용되지 않는다고 말합니다. 초보자는 자리 표시자가 H5의 새로운 속성이라는 것을 모르는 것 같습니다. IE6부터 IE9까지입니다. 기본 자리 표시자는 지원되지 않습니다.

호환성 문제를 해결하지 않고 자리 표시자만 사용한다면(자리 표시자를 사용하려면 호환성 코드의 긴 부분을 추가해야 함) 작업이 아닌 둘러보기만 한다고 할 수 있습니다.

(빨간색 텍스트는 댓글 영역의 내용으로, 일부 내용은 일시적으로 이해가 불가능합니다)

3. 텍스트 필드, 여러 줄 텍스트 입력 지원

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>文本域</title>
 6 </head>
 7 <body>
 8 <form action="save.php" method="post" >
 9     <label>个人简介：</label>
10     <textarea>在这里输入内容...</textarea>
11     <input type="submit" value="确定"  name="submit" />
12     <input type="reset" value="重置"  name="reset" />
13 </form> 
14 </body>
15 </html>
로그인 후 복사

사용자는 양식에 양식을 입력해야 합니다. 큰 텍스트 블록을 입력할 때는 텍스트 입력 필드를 사용해야 합니다.

구문: 

<textarea  rows="行数" cols="列数">文本</textarea>
로그인 후 복사

1. 로 끝나는 태그가 쌍으로 나타납니다.

2. cols: 여러 줄 입력 필드의 열 수입니다.

3. 행: 여러 줄 입력 필드의 행 수입니다.

4. 태그 사이에 기본값을 입력할 수 있습니다.

예:
로그인 후 복사

브라우저에 결과 표시:

뷰어와의 상호 작용, 양식 태그에 대한 기본 HTML 튜토리얼

注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。

来试一试：修改文本域的列数和行数

在编辑器中第10行