수익성이 없는 양식 HTML. HTML로 양식 만들기. 라디오 버튼과 체크박스의 차이점

사이트의 HTML 양식을 정의하는 HTML 태그

우리는 웹사이트를 만들고 개별 페이지인터넷에서방문객들과 소통하기 위해

HTML 양식사이트 방문자 등록, 대화형 설문조사 및 투표, 메시지 보내기, 구매 등을 수행하는 데 사용됩니다. HTML이 양식은 소프트웨어 스크립트에 의한 처리를 위한 정보 수집 및 후속 전송이라는 한 가지 목적으로 만들어졌습니다. 이메일.

예제 HTML 양식 | 사이트를 입력하세요

태그, 속성 및 값

- 모양을 결정합니다.
name="" - 양식의 이름을 정의합니다.
method="" - 양식에서 데이터를 보내는 방법을 정의합니다. 값: "get" (기본값) 및 "post" . "포스트" 방법은 많은 양의 데이터를 전송할 수 있기 때문에 자주 사용됩니다.
action="" - 처리를 위해 데이터가 전송되는 URL을 정의합니다. 우리의 경우 - enter_data.php ..
- 데이터 입력을 위한 버튼, 스위치, 텍스트 필드와 같은 양식 요소를 정의합니다.
type="text" - 데이터 입력을 위한 텍스트 필드를 정의합니다.
type="password" - 별표 또는 원 형태로 텍스트가 표시되는 비밀번호 입력 필드를 정의합니다.
type="checkbox" - 라디오 버튼을 정의합니다.
type="hidden" - 숨겨진 양식 요소를 정의합니다. - 추가 정보를 서버로 전송하는 데 사용됩니다.
size="25" - 텍스트 필드의 문자 길이입니다.
maxlength="30" - 입력할 수 있는 최대 문자 수입니다.
value="" - 라디오 버튼이나 스위치와 관련된 경우 처리를 위해 전송될 값을 정의합니다. 텍스트 필드나 버튼의 일부인 이 속성의 값은 예를 들어 위 예에서 Vasya 또는 Login으로 표시됩니다.

예제 HTML 양식 | 사이트에 대한 댓글

<a href="https://geekpad.ru/ko/html-gradientnaya-zalivka-css-gradienty-primery-ispolzovaniya.html">예제 HTML</a>양식

태그, 속성 및 값

action="http://site/comments.php" - 양식의 데이터가 전송될 URL을 정의합니다.
id="" - 양식 요소의 이름과 식별자를 정의합니다.
name="" - 양식 요소의 이름을 정의합니다.
- 양식의 일부로 텍스트 필드를 정의합니다.
cols="" - 양식 텍스트 필드의 열 수를 결정합니다.
Row="" - 양식 텍스트 필드의 행 수를 정의합니다.

사이에 있는 경우 텍스트를 배치하면 쉽게 제거할 수 있는 예시로 필드 내부에 표시됩니다.

예제 HTML 양식 | 드롭 다운 목록

HTML 양식

태그, 속성 및 값

- 선택할 위치가 있는 목록을 정의합니다.
size="" - 표시되는 목록 위치의 수를 결정합니다. 값이 1이면 드롭다운 목록을 처리하는 것입니다.
- 목록의 위치(항목)를 결정합니다.
value="" - 처리를 위해 양식에서 지정된 URL로 전송되는 값을 포함합니다.
selected="selected" - 예시로 목록 항목을 강조 표시합니다.

예제 HTML 양식 | 스크롤 막대가 있는 목록

size="" 속성의 값을 늘리면 스크롤 막대가 있는 목록이 표시됩니다.

HTML 양식

이 옵션의 경우 multiple="multiple" 플래그를 사용하면 여러 위치를 선택할 수 있습니다. 이 항목이 없으면 하나의 항목만 선택할 수 있습니다.

type="submit" - 버튼을 정의합니다.

type="reset" - 재설정 버튼을 정의합니다.

value="" - 버튼의 레이블을 정의합니다.

추가로 참조하세요:

안녕하세요, 블로그 사이트 독자 여러분. 연구를 계속하면서 사이트에 대한 다양한 양식을 만들 수 있는 속성()이 포함된 양식 및 입력 태그를 고려합니다.

특정 웹 리소스의 주제와 콘텐츠가 무엇이든 텍스트 필드, 드롭다운 메뉴, 다양한 버튼 또는 스위치 등 다양한 형태의 양식이 포함될 가능성이 높습니다. 그건 그렇고, 나는 이미 출판물 중 하나에서 형태를 다양화하는 데 도움이 되는 요소에 대해 이야기했습니다.

가능한 모든 다양한 형태의 실제 목적은 무엇입니까? 우선, 특별히 생성된 스크립트(핸들러)를 사용하여 추가 처리를 위해 사용자가 입력한 데이터를 서버로 보내는 데 필요합니다.

HTML 양식 - 양식 및 입력을 사용하여 작성하는 방법

처음에 말했듯이 어느 정도 개발된 웹사이트에는 어떤 종류의 웹 양식이 있거나 한 번에 여러 개가 있어야 합니다. 웹 리소스가 최신 요구 사항을 준수한다는 관점에서 이들이 얼마나 중요한지 이해하려면 양식 및 입력 태그를 기반으로 하는 양식을 사용하는 세 가지 개체를 제공하는 것으로 충분합니다. 한 방향 또는 다른 방향의 프로젝트에 대한 필요성:

예를 들어 창작에 관한 기사 링크를 따라가면 피드백(모든 사용자가 사이트 관리에 메시지를 보낼 수 있도록 허용) 양식이 포함된 HTML 코드가 여기에 표시됩니다.

) 부분:

웹 양식 설치를 시작할 때 양식이 중요한 역할을 하는 곳입니다. 자체적으로 웹페이지의 영역을 표시하지는 않지만 다른 태그를 포함하는 컨테이너 역할을 합니다.

우리의 경우(위 스크린샷 참조) 여기에는 여러 가지가 포함됩니다. 입력(이 HTML 태그는 단일 태그입니다. 즉, 닫는 구성요소가 없습니다.) 텍스트 영역, 다양한 속성 세트가 있습니다. 각각은 양식에 포함된 자체 요소를 정의합니다.

16. 자동 초점(매개변수 없음) - 웹 페이지가 로드될 때 즉시 필드에 초점을 설정하는 논리적 속성으로, 결과적으로 마우스 버튼을 클릭하지 않고도 데이터를 입력할 수 있습니다. 입력 유형="숨김"에만 적용할 수 없습니다.

17. 장애가 있는(값 없음) - 추가된 양식 요소를 사용자에 대해 비활성화합니다. 대부분의 경우 액세스할 수 없는 요소가 활성화되는 조건이 지정되는 스크립트와 함께 사용됩니다.

18. 형태— 요소가 컨테이너 외부에 있을 때 해당 요소를 양식과 연결합니다.

. 연결하려면 양식 태그에 전역 ID 속성이 추가되고 입력 태그에 양식 속성이 추가되며 해당 값은 동일합니다(예: id="data" 및 form="data"). .

19. 다수의(매개변수 없음) - 세트 객관식 옵션사용자용이며 type="file" 및 type="email"과 함께 사용됩니다.

파일 업로드 필드를 사용하는 경우 다음을 사용하여 컴퓨터에서 한 번에 여러 파일을 선택할 수 있습니다. Ctrl 키또는 교대. 이메일 주소를 입력하는 필드가 표시되면(type="email") 이메일을 쉼표로 구분하여 입력해야 합니다.

20. 필수의(값 없음) – 사용자가 데이터를 입력해야 한다는 요구 사항을 활성화합니다. 따라서 필수 필드가 비어 있는 경우 브라우저는 웹 양식 제출을 차단하고 해당 필드를 작성해야 한다는 해당 메시지를 표시합니다.

이 속성은 그래픽 및 표준 버튼(type="button | image")은 물론 숨겨진 입력 필드(type="hidden")에도 사용되지 않습니다.

21. 크기— 텍스트 필드의 너비를 문자 단위로 결정합니다("email | 비밀번호 | 검색 | 전화 | 텍스트 | url" 매개변수가 있는 유형 요소에만 적합). 기본값은 20자입니다..

입력 태그의 다음 네 가지 속성(22-25)은 와 거의 동일한 기능을 수행하지만 완전성을 위해 이에 대해서도 간략하게 언급하겠습니다.

22. 최대 길이- 한도를 정한다 최대 금액텍스트 필드를 채울 때 입력할 수 있는 문자입니다. 이 제한을 초과하려고 시도하면 추가 입력이 차단됩니다. 이 속성은 유형="이메일 | 비밀번호 | 검색 | 전화 | 텍스트 | URL"인 텍스트 요소에만 적용 가능합니다.

23. 최소길이— 텍스트 영역에 입력하는 데 필요한 최소 문자 수에 제한을 둡니다. 더 적은 문자가 포함된 데이터를 전송하려고 하면 양식 내용을 보완해야 함을 알리는 짧은 메시지가 나타나고 이미 입력된 문자 수에 대한 정보가 제공됩니다. 이용조건은 maxlength의 경우와 정확히 동일합니다.

24. 자리 표시자— 텍스트 필드에 직접 힌트(매개변수 역할을 함)를 배치할 수 있습니다. 힌트는 사용자가 문자를 입력하기 시작하는 순간 사라집니다. 매개변수를 사용하여 형성된 필드에만 해당 이메일, 비밀번호, 검색, 문자, 전화, URL입력 태그의 유형 속성입니다.

25. 읽기 전용(매개변수 없음) - 이전에 필드에 입력한 텍스트를 읽고 복사하는 데만 사용할 수 있음을 나타냅니다. 일반적으로 스크립트와 함께 사용되며 조건이 충족되면 이 양식 요소를 활성화할 수 있습니다.

마지막으로 다양한 양식 요소의 기능을 보완하는 몇 가지 추가 속성은 다음과 같습니다.

26. 무늬- 그 의미가 반영되는 역할 정규식, 이에 따라 정보 입력 규칙이 설정됩니다. 이 경우 사용자가 필드를 작성하는 데 도움이 되는 설명 텍스트를 추가할 수 있는 매개변수로 전역 제목 속성을 추가로 추가하는 것이 좋습니다. 패턴은 이메일, 비밀번호, 검색, 문자, 전화, URL 요소에만 적용됩니다. 예를 들어 이해해 봅시다. 다음은 단순화된 등록 양식의 코드입니다( ).

로그인

비밀번호

로그인 필드(type="text")의 경우 패턴 값으로 정규식(5,)이 지정되어 라틴 문자 사용을 의미하며 5자 이상 입력해야 합니다.

비밀번호(type="password")의 텍스트 영역과 관련하여 값은 (8,)로 설정됩니다. 이는 어떤 경우에도 라틴 문자(대문자 및 소문자)와 숫자만 입력하도록 지정합니다. 모든 문자의 총 개수는 8자 이상이어야 합니다.

지정된 입력 조건을 위반하면 브라우저는 데이터 전송을 허용하지 않으며 적절한 경고를 표시합니다.

27. 소스— 그래픽 버튼 "image"를 표시하기 위한 이미지(해당 값인 URL)에 대한 경로를 정의합니다(위의 입력 유형 매개변수 표 참조).

28. 단계— 숫자 값 선택을 제공하는 요소에 대한 단계를 설정합니다(입력 유형="날짜 | 날짜시간-지역 | 월 | 숫자 | 범위 | 전화 | 시간 | 주.").

매개변수로 정수나 분수를 사용할 수 있습니다. 기본 단계="1". 최종 입력 범위를 설정하려면 위에서 언급한 min 및 max 속성을 다시 사용할 수 있습니다. 명확성을 위해 테스트 양식에 2개의 요소 type="number"를 포함하겠습니다. 첫 번째의 경우 step="2"로 설정하고 두 번째의 경우 step="0,1"로 설정합니다.

-10에서 10 사이의 값을 입력하세요.

0에서 1 사이의 값을 입력하세요.

29. 값— 핸들러에 전달될 양식 요소의 값을 설정합니다. 이름-매개변수 쌍이 서버로 전송됩니다. 여기서 이름은 입력 태그의 이름 속성에 의해 결정되고 매개변수는 값 속성에 의해 결정됩니다. 또한, 다양한 형태 요소에 대해 가치는 다양한 역할을 하게 됩니다:

for type="button | Reset | submit" - 버튼에 텍스트 라벨을 설정합니다.
for type="checkbox | radio | image" - 서버에서 데이터를 전송하고 처리할 때 각 확인란, 스위치 또는 그래픽 버튼을 식별합니다.
for type="password | text" - 양식을 로드하는 즉시 필드에 예비 텍스트가 표시되며 사용자가 이를 변경하거나 완전히 삭제할 수 있습니다.
for type="file" (파일 업로드)은 이 요소에 영향을 주지 않으므로 적용되지 않습니다.

위의 각 옵션에 대한 사용 예:

CMS를 선택하세요: W.P. 줌라

여기 값 속성 값각 요소의 다음 구성 요소를 정의합니다. type="text"("Your name") 필드에 대한 텍스트 조각을 표시하고, type="radio"를 사용하여 설정된 각 라디오 버튼("1" 및 "2")을 식별합니다. 또한 버튼("제출")의 비문을 활성화합니다.

아름다운 HTML 양식을 만드는 예

다음으로 샘플 웹 양식을 보여 드리겠습니다. 코드에는 입력 유형의 조합뿐만 아니라 다른 의미, 표준 텍스트 필드와 버튼을 형성할 뿐만 아니라 예를 들어 직접 마우스 클릭뿐만 아니라 텍스트를 클릭하여 요소에 초점을 맞출 수도 있습니다.

독특한 디자인을 얻으려면 참고하세요 개별 구성 요소양식은 각각 세트로 배치됩니다.

뒤로(최대 너비:350px; 여백:50px 자동 0; 패딩:20px; 배경:#f3ebe1; 글꼴-가족:"Oswald", sans-serif;) .form-1, .form-2, .form-3 , .form-4 (padding:15px; border:4px double #909090) .form-1, .form-2, .form-3 (border-bottom:none) .form-1 입력 (display:block; margin- 하단:10px; 너비:100%) .in(왼쪽 패딩:40px) .in 입력(너비:100%) ..png) 반복 없음;배경 위치:10px 10px) ..png) 반복 없음; 배경 위치:10px 10px) .form-4 입력(디스플레이:블록; 높이:50px; 글꼴 크기:24px; 너비:100%; 커서: 포인터)

결과적으로 이러한 웹 양식은 다음과 같은 개요를 따릅니다.

더 전체 정보이 특정 양식을 작성하려면 이 페이지(그런데 거기에 데이터를 입력하여 개별 텍스트 영역의 기능을 확인할 수 있을 뿐만 아니라 HTML 코드 및/또는 편집을 통해 웹 양식을 실험해 볼 수도 있습니다. CSS 속성, 완전히 또는 부분적으로 변경 모습).

내 목표는 사이트에서 다양한 HTML 양식을 생성하기 위해 type 속성과 form 태그의 다양한 값을 사용하는 알고리즘을 소개하는 것이었습니다. 임무가 완료되길 바랍니다. 어쨌든 댓글을 통해 이 다양한 주제에 대한 여러분의 생각을 공유해 주세요.

당연히 후속 출판물에서는 계속해서 주요 태그를 설명할 것입니다. 하이퍼텍스트 마크업, 이메일을 통해 블로그 업데이트를 구독하는 것을 잊지 마세요. 또한 이를 강화하려면 연락처 양식 작성에 대한 Evgeniy Popov의 또 다른 강의를 살펴보세요.

설명

꼬리표

웹 페이지에 양식을 설치합니다. 이 양식은 사용자와 서버 간의 데이터 교환을 위한 것입니다. 양식 적용 범위는 서버에 데이터를 보내는 것에만 국한되지 않으며 클라이언트 스크립트를 사용하여 양식의 모든 요소에 액세스하고 이를 변경하고 재량에 따라 적용할 수 있습니다.

문서에는 여러 개의 양식이 포함될 수 있지만 한 번에 하나의 양식만 서버에 제출할 수 있습니다. 이러한 이유로 양식 데이터는 서로 독립적이어야 합니다.

양식을 서버에 제출하려면 제출 버튼을 사용하십시오. 양식 내에서 Enter 키를 눌러도 동일한 결과를 얻을 수 있습니다. 양식에 제출 단추가 없으면 Enter 키를 눌러 해당 사용을 시뮬레이션합니다.

양식이 서버에 제출되면 데이터 제어가 태그의 작업 속성에 의해 지정된 프로그램으로 전송됩니다. . 브라우저는 먼저 "이름=값" 쌍의 형태로 정보를 준비합니다. 여기서 이름은 태그의 이름 속성에 의해 결정됩니다. , 값은 사용자가 입력하거나 기본 양식 필드로 설정됩니다. GET 메서드를 사용하여 데이터를 보내는 경우 주소 표시줄은 다음 형식을 사용할 수 있습니다.

http://www..cgi?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

매개변수는 다음에 나열됩니다. 물음표, CGI 프로그램 주소 뒤에 지정되고 앰퍼샌드 문자(&)로 구분됩니다. 비라틴 문자는 16진수 표시(%HH 형식, 여기서 HH는 ASCII 문자 값의 16진수 코드)로 변환되고 공백은 더하기(+)로 대체됩니다.

컨테이너 내부에서 허용됨 다른 태그를 배치하지만 양식 자체는 웹 페이지에 어떤 방식으로도 표시되지 않으며 해당 요소와 중첩된 태그의 결과만 표시됩니다.

통사론

...

속성

서버가 데이터를 수신하고 처리할 수 있는 인코딩을 설정합니다. 양식 데이터를 처리하는 프로그램이나 문서의 주소입니다. 양식 필드의 자동 채우기를 활성화합니다. 양식 데이터를 인코딩하는 방법입니다. HTTP 프로토콜 방법. 양식 이름. 입력의 정확성을 위해 내장된 양식 데이터 검사를 재정의합니다. 핸들러가 반환된 결과를 로드할 창 또는 프레임의 이름입니다.

닫는 태그

필수의.

HTML5 IE Cr Op Sa Fx

양식 태그

이 예의 결과는 그림 1에 나와 있습니다. 1.

쌀. 1. 브라우저 창에서 양식 요소 보기

블로그 사이트 독자 여러분, 안녕하세요. 오늘 저는 HTML 양식과 같은 것에 대해 이야기하고 싶습니다. 사이트 엔진(cms)이 무엇이든, 양식 및 입력 태그와 속성 및 매개변수인 Button, Checked, Value, Checkbox, Radio, Checkbox, Submit을 사용하여 생성된 양식을 확실히 사용합니다.

드롭다운 목록과 텍스트 필드(Select, Option, Textarea, Label, Fieldset, Legend)를 생성하기 위해 이 요소를 추가할 수도 있습니다.

양식이 필요한 이유는 무엇이며 최신 웹사이트에서는 양식이 어떻게 작동합니까?

이러한 태그를 사용하여 동일한 사이트 검색 문자열()이 생성되며, 프로젝트에 대한 검색이 필요합니다. 따라서 그들이 어떻게 작동하고 작동하는지 이해해도 전혀 해를 끼치 지 않습니다. 성공적인 일디자인에 대한 것, 그리고 독립적인 프로모션과 프로모션을 통해서도 불필요하지 않을 것입니다.

따라서 이러한 요소를 연구해야 할 필요성을 정당화한 후에는 더 이상 질문이 발생하지 않아야 한다고 생각하므로 가능한 옵션을 직접 연구해야 할 때입니다.

예, 또한 우리는 이미 하이퍼텍스트 마크업 언어 주제에 관한 많은 자료(예: three ) 및 를 검토했음을 상기시키고 싶습니다.

기본적으로 양식은 기본 컨테이너 내부의 양식 태그(체크됨, 값, 체크박스, 라디오, 체크박스, 제출 등)에서 다양한 태그가 삽입되는 요소로 구성됩니다. 코드를 편리한 위치에 배치하기만 하면 됩니다. 사이트 템플릿에 배치하여 태그와 해당 속성을 사용하여 표시되는 방식을 나타냅니다.

입력된 쿼리를 제출하기 위한 버튼이 있는 텍스트 필드, 라디오 버튼이 있는 선택 항목(제공된 버튼 중 하나만 누른 상태로 둘 수 있음), 제출() 버튼이 있는 여러 텍스트 필드 등이 될 수 있습니다.

예를 들어, "검색"의 경우 값 속성을 사용하면 쿼리 입력 필드 옆에 있는 버튼에 정확히 무엇을 쓸지 지정할 수 있습니다. 양식에 입력된 데이터는 어떤 방식으로든 추가 처리되어야 합니다.

예를 들어 피드백의 경우 사용자는 필드에 자신의 이름을 입력하고 이메일과 메시지 텍스트를 입력한 후 보내기 버튼을 클릭하면 데이터가 전송되기를 바랄 권리가 있습니다. 양식의 내용이 사이트 작성자의 이메일로 전송됩니다. 그러나 안타깝게도 하나의 하이퍼텍스트 마크업 언어()만으로는 이를 구현할 수 없습니다.

이러한 목적을 위해서는 사용자가 보내기 버튼을 클릭한 후 피드백 필드의 모든 데이터를 가져와 리소스 소유자에게 이메일로 보내는 특수 프로세서 프로그램이 필요합니다. Action 속성을 사용하여 이 작업을 직접 수행할 프로그램을 지정해야 합니다.

일반적으로 처리 프로그램은 다음 언어로 작성된 스크립트입니다. PHP 언어. 따라서 Form 태그의 Action 속성에서 호스팅 서버에 있는 이 스크립트 파일의 경로를 지정해야 합니다. 구독 예를 들어보겠습니다. RSS 피드이메일을 통한 내 블로그:

처음에는 조금 불분명해 보일 수도 있지만 이야기를 계속할수록 모든 것이 더 명확해질 것이라고 생각합니다.

버튼, 체크박스, 라디오 버튼을 생성하기 위한 양식 및 입력 태그

모든 양식은 여는 태그와 닫는 태그로 묶어야 합니다. 형태. 이것은 창작을 위한 일종의 컨테이너입니다. 이 태그에는 다음과 같은 필수 및 선택 속성이 많이 있습니다.

이름 – 다음 경우에 지정해야 하는 고유한 이름입니다. HTML 파일당신이 어떤 일을 하는 곳에서는 여러 웹 양식을 사용할 것입니다
작업 – 추가 처리를 위해 데이터가 전송될 스크립트의 경로를 나타내는 필수 속성입니다.
방법 – 이 웹 양식에서 처리기 파일 스크립트로 데이터를 전송하는 방법을 변경할 수 있습니다. 지정하지 않으면 기본적으로 Get 메서드가 사용됩니다. 엄밀히 말하면 주로 변수 및 단문 메시지용으로 사용됩니다. 개방형 방식다음을 통해 데이터 전송 주소 표시 줄브라우저. 양식 데이터를 핸들러 스크립트로 전송하려면 다음을 사용하는 것이 더 좋습니다. POST 방식 , 전송을 위해 특별히 설계되었습니다. 문자 메시지폐쇄적으로

다양한 웹 양식을 만들 수 있는 나머지 태그를 살펴보겠습니다. 가장 다재다능한 것은 입력. Type 속성은 이 태그를 사용하여 생성된 HTML 양식이 정확히 무엇인지 결정하는 내부에 작성되어야 합니다.

입력 및 유형을 사용하면 다음 요소를 생성할 수 있습니다.

한 줄 텍스트 필드(Type="Text")
비밀번호 입력 필드(Type="Password")
체크박스(유형="체크박스")
라디오 버튼(유형="라디오")
숨겨진 필드(유형="숨김")
일반 버튼(Type="Button")
핸들러에 데이터를 보내기 위한 버튼(Type="Submit")
웹 양식을 가져오는 버튼 원래 상태(유형="재설정")
서버에 파일을 업로드하기 위한 필드(Type="File)
이미지가 있는 버튼(Type="Image")

입력에 닫는 태그가 없습니다. 이를 사용하여 생성된 웹 양식의 모양은 전적으로 다음에 지정된 매개변수에 따라 달라집니다. 유형 속성. Type을 지정하지 않으면 기본적으로 텍스트 필드가 생성됩니다.

유형에 대해 서로 다른 값을 사용하여 입력에서 생성된 양식의 예

기타 입력 태그 속성 및 사용 예

다른 속성이 필요한 것이 무엇인지 살펴보겠습니다.

이름 – 데이터를 핸들러 프로그램 스크립트로 전송해야 하는 경우 이름 속성에 대한 매개변수를 지정해야 합니다. 이 이름으로 양식에서 전송된 데이터가 정보 처리 프로그램에 나타납니다.
크기 - 생성되는 웹 양식의 필드 크기를 설정하는 데 사용됩니다. 값은 이 필드에 들어갈 수 있는 문자 수로 표시됩니다. 크기를 지정하지 않으면 너비는 기본적으로 24자로 설정됩니다.
Maxlength - 기본적으로 Html 양식에 입력할 수 있는 문자 수는 제한되지 않지만 Maxlength를 사용하면 이 제한을 설정할 수 있습니다. 필드에 표시된 것보다 더 많은 문자를 입력할 수 없습니다.
값 - 필드 또는 데이터 제출 버튼에 기본적으로 정확히 무엇을 기록할지 지정하는 데 사용할 수 있습니다.
Checked는 라디오 버튼이나 체크박스의 입력에 삽입할 수 있는 플래그 속성입니다. 이 경우 웹 양식이 포함된 페이지가 로드되면 이 라디오 버튼 또는 확인란이 활성화됩니다(이미 확인 표시가 있음).

이제 모든 것을 살펴 보겠습니다. 입력이 포함된 양식의 예. 텍스트 필드의 모양은 비밀번호 입력 필드의 모양과 유사하므로 예를 들어 이메일 주소를 입력하기 위해 텍스트를 생성하는 옵션만 고려해 보겠습니다.

이제 라디오 버튼(라디오)이 포함된 웹 양식을 만드는 방법을 살펴보겠습니다.

이 양식은 입력 태그를 두 번 사용하여 두 개의 라디오 버튼을 각각 생성합니다. 또한 각각에는 동일한 값(resultat)을 갖는 Name 속성이 포함되어 있으며 Value 값은 다릅니다(YES 및 NO).

즉, 처리할 때 스위치 중 하나를 선택하면 변수가 전송되고 이름은 Name에 기록되지만 이 변수의 값은 선택한 스위치에 따라 달라집니다.

체크박스가 포함된 웹 양식을 만드는 예를 살펴보겠습니다.

체크박스는 한 번에 여러 옵션을 선택할 수 있다는 점에서 라디오 버튼과 다릅니다. 이름은 핸들러 파일에서 체크박스가 배치될 체크박스를 결정하는 데 사용되며, 값은 핸들러로 전송될 값을 지정합니다(값이 지정되지 않은 경우 이 체크박스 옆에 있는 텍스트가 핸들러로 전송됩니다). ).

선택, 옵션, 텍스트 영역, 레이블, 필드 세트, 범례 - 드롭다운 목록, 텍스트 영역 및 기타 웹 양식 요소

우선, 웹 양식이 실제로 무엇인지, 그리고 웹 양식이 웹 사이트 페이지에 필요한 이유에 대해 조금 상기시켜 드리고 싶습니다. 이는 주로 버튼, 텍스트 입력 필드, 드롭다운 목록, 확인란, 스위치 등 모든 운영 체제에서 발견되는 요소를 사용자에게 친숙한 형식으로 복제하도록 설계되었습니다.

모든 사용자는 추가 설명 없이 이러한 요소의 목적을 이해하고 HTML 버튼양식을 클릭하면 클릭해야 한다는 것을 이해합니다.

또한 모든 구성 요소(예: Select, Option, Textarea, Label, Fieldset, Legend)는 이미 완성된 공백(컨테이너)이므로 필요한 속성 및 매개변수와 함께 원하는 태그를 사용하기만 하면 됩니다.

브라우저 자체는 특정 웹 양식 요소를 표시하는 방법을 알고 있습니다. 사실, 동일한 요소를 표시하는 옵션은 다음과 같습니다. 다른 브라우저서로 약간 다를 수 있지만 일반적으로 크게 다르지는 않습니다.

저것. HTML의 웹 양식은 키를 전송하려는 시도인 것으로 밝혀졌습니다. 모든 운영 체제에서 사용되는 요소, 웹사이트 페이지로 이동합니다. 그런데 왜 사이트 페이지에 필요할 수 있습니까?

원칙적으로 유사한 요소가 사용되는 것과 동일한 경우 운영체제— 사용자로부터 데이터 전송. 양식의 경우 사용자의 데이터가 서버로 전송되어 처리됩니다. 특별 프로그램(안타깝게도 하이퍼텍스트 마크업 언어는 데이터 처리를 허용하지 않습니다.)

그러나 데이터는 서버뿐만 아니라 예를 들어 Form 태그의 Action 속성에 지정된 주소로 이메일을 통해 보낼 수도 있습니다. Html에서 이메일로 데이터를 보낼 때 필드를 채우는 사용자는 데이터 보내기 버튼을 클릭한 후 시작됩니다. 메일 프로그램그의 컴퓨터에 기본값이 있습니다.

이 경우 여는 Form 태그는 다음과 같아야 합니다.

선택 및 옵션 - 드롭다운 목록 태그

드롭다운 목록 필드를 생성하는 모든 웹 양식 요소는 동일한 방식으로 구성됩니다. 먼저 열기 및 닫기 Html Select 태그를 사용하여 콤보 상자의 컨테이너를 설정합니다. 그리고 이 컨테이너 내부에는 이 목록의 항목(요소)으로 별도의 컨테이너가 생성됩니다. 이는 Option 태그를 열고 닫는 것을 사용하여 수행됩니다.

다음과 같이 밝혀졌습니다.

하지만 이것은 단순화된 디자인이기 때문에 Select 및 Option에는 다양한 속성이 있습니다., 생성된 드롭다운 목록 필드의 속성과 모양을 정의합니다.

이름 - 고유한 이름을 지정해야 합니다. 이 요소의 Select를 사용하여 만든 웹 양식입니다. 이 이름은 서버에서 Data Handler 프로그램에 변수 이름으로 전달됩니다. 이 변수의 값은 사용자가 선택하는 드롭다운 목록 항목의 Value 속성(각 항목에 대한 옵션에서 설정)의 값이 됩니다.
크기 - 표시되는 항목 수를 설정하는 데 사용할 수 있습니다. 즉, Size를 사용하면 표시되는 줄 수로 측정된 목록의 높이를 설정할 수 있습니다. Select 태그에 Size 값을 명시적으로 지정하지 않으면 드롭다운 목록의 기본 높이가 사용되며 Select 속성이 없거나 Select 속성에 있는 경우 높이가 달라집니다.
1. 선택에 다중이 있는 경우 웹 양식의 드롭다운 목록 높이는 기본적으로 해당 요소 수와 같습니다. 저것들. 다중 선택 드롭다운 목록 항목이 모두 표시됩니다. 아래의 복수형 예를 참조하세요. Select의 Size 속성이 항목 수보다 작게 설정된 경우 오른쪽에 스크롤 막대가 나타납니다.
2. 선택에 다중이 없으면 웹 양식의 드롭다운 목록 높이는 기본적으로 한 줄입니다. 저것들. 한 줄만 표시되며 나머지 항목은 엘리베이터 버튼(오른쪽)을 눌러야 접근할 수 있습니다. 아래 예를 참조하세요
다중 - 이 속성을 선택 태그에 할당하면 여러 항목을 동시에 선택할 수 있는 드롭다운 목록을 생성할 수 있습니다. 아래에서 이 속성에 대해 자세히 알아보세요.

드롭다운 목록이 있는 양식은 두 가지 옵션으로 나눌 수 있습니다. 첫 번째 옵션에서는 드롭다운 목록이 있는 필드의 요소(라인) 하나만 선택할 수 있습니다. 두 번째 옵션에서는 Ctrl 또는 Shift를 누른 채 사용 가능한 여러 항목을 동시에 선택할 수 있습니다.

이 경우 두 번째 옵션에서는 선택한 모든 항목에 대한 데이터가 서버로 전송됩니다. 어떤 드롭다운 목록이 생성될지는 Select 태그에 Multiple 속성이 있는지 여부에 따라 결정됩니다.

Select에서는 매개변수 없이 Multiple을 지정합니다. 간단히 Multiple이라고 쓰여 있고 그게 전부입니다. 존재하는 경우 다중 선택 기능(Ctrl 또는 Shift 키를 누른 상태)을 갖춘 드롭다운 목록 웹 양식이 생성됩니다.

드롭다운 목록이 있는 필드의 변형입니다. 객관식 가능, 다음과 같이 표시됩니다.

오른쪽에는 위 코드를 기반으로 하는 다중 선택 드롭다운 웹 양식의 예가 있습니다. 보시다시피 Ctrl 또는 Shift를 누르면 여러 항목을 동시에 선택할 수 있습니다.

Select 태그에 Multiple 속성이 없으면 이 드롭다운 목록(행)의 요소 하나만 선택할 수 있습니다.

하나의 항목만 선택할 수 있는 예는 다음과 같습니다.

라벨 선택 SelectED 사이트 범례

옵션 태그 속성

생성된 드롭다운 목록(선택 및 옵션 사용)에서 그룹 제목이 있는 구분 기호와 같은 것을 추가할 수 있습니다. 이는 글꼴 스타일이 나머지 메뉴 항목과 다릅니다.

드롭다운 목록 항목에서 그룹을 생성하려면 해당 항목을 Optgroup 양식의 열기 및 닫기 태그로 묶어야 하며, Optgroup 열기 태그에 Label 속성을 추가해야 합니다. 원하는 그룹 이름.

예를 들면 다음과 같습니다:

라벨 선택
SelectED 웹사이트 범례

Textarea - 양식에 텍스트 필드 만들기

우리가 고려하지 않은 웹 양식 요소가 하나 더 있습니다. 바로 Textarea(여러 줄의 텍스트를 입력할 수 있는 필드)입니다. 이는 쌍을 이루는 Html 태그 Textarea를 사용하여 생성됩니다. 또한 텍스트를 다음으로 전송할 수 있습니다. 새 줄전송된 내용을 고려하여 서버로 전송됩니다.

따라서 여러 줄의 텍스트 필드를 생성하려면 열고 닫는 텍스트 영역을 지정해야 하며, 그 사이에 웹 양식이 있는 페이지가 로드될 때 표시되는 텍스트를 추가할 수 있습니다. 그런 다음 사용자는 이 텍스트를 지우고 직접 작성할 수 있습니다.

자신에 대해 무엇을 말해주실 수 있나요?

보시다시피, 이 요소를 활성화하기 위해 텍스트를 클릭하는 것은 쓸모가 없습니다. 텍스트 자체를 클릭해야 합니다. 이것이 바로 Label 태그가 수정하도록 설계된 상황입니다. 이를 통해 웹 양식 요소 옆의 텍스트를 클릭 가능하게 만들 수 있습니다. 이는 의심의 여지가 없습니다. 유용성이 향상됩니다.

그런데 묶는 방법 HTML 요소양식과 텍스트? 이렇게 하려면 고유한 매개변수가 있는 ID를 속성에 추가해야 하며, 텍스트는 열고 닫는 Label 태그로 묶어야 합니다. 그리고 그것이 전부는 아닙니다. 여는 Label 태그에 For 속성을 포함해야 합니다. 이 속성의 매개변수는 양식 요소의 Html 태그에 있는 ID 속성의 매개변수와 정확히 동일해야 합니다. 다음과 같이 밝혀졌습니다.

보시다시피 이제 Label을 사용하면 웹 양식 요소 자체를 클릭하는 것뿐만 아니라 옆에 있는 텍스트를 클릭하여 활성화할 수도 있습니다.

Fieldset 및 Legend - 양식을 여러 부분으로 나누기

HTML의 큰 형식이 프레임으로 둘러싸인 그룹(Fieldset)으로 나누어지고 각 그룹에는 고유한 제목(범례)이 있는 것을 자주 보셨을 것입니다. 이는 Fieldset과 Legend라는 두 개의 태그만 사용하여 구현됩니다. 그들은 쌍을 이룹니다. 시작과 끝이 있어야 합니다.

따라서 다음에서 그룹을 만들려면 구성요소 Fieldset 태그를 열고 닫을 때 이러한 모든 부분을 래핑해야 합니다. 그리고 이 그룹에 대한 제목(범례)을 설정하려면 Fieldset을 연 직후에 시작 및 종료 범례의 구성을 작성해야 하며, 그 사이에 그룹 제목 텍스트를 삽입해야 합니다.

다음은 Fieldset 및 Legend를 사용하여 그룹을 생성하는 예입니다.

행운을 빕니다! 블로그 사이트 페이지에서 곧 뵙겠습니다.

당신은 관심이 있을 수도 있습니다

선택, 옵션, 텍스트 영역, 라벨, 필드셋, 범례 - HTML 태그드롭다운 목록 및 텍스트 필드 양식
의 목록 HTML 코드- UL, OL, LI 및 DL 태그
MailTo - 그것이 무엇이며 HTML로 이메일을 보내는 링크를 만드는 방법
HTML 및 CSS 코드에서 색상을 설정하는 방법, 테이블에서 RGB 음영 선택, Yandex 출력 및 기타 프로그램
하이퍼텍스트 마크업 언어 Html이란 무엇이며 W3C 유효성 검사기에서 모든 태그 목록을 보는 방법
에 삽입하는 방법 HTML 링크그리고 사진(사진) - IMG와 A 태그
Html의 테이블 - Table, Tr 및 Td 태그와 이를 생성하기 위한 Colspan, Cellpadding, Cellspacing 및 Rowspan
글꼴(얼굴, 크기 및 색상), 인용구 및 사전 태그 - 순수 HTML의 레거시 텍스트 형식(없음 CSS를 사용하여)
하이퍼링크(A, Href, Target 공백)를 만드는 방법, 사이트의 새 창에서 여는 방법, HTML 코드로 그림을 링크로 만드는 방법

HTML 양식은 사용자가 관심 있는 정보를 입력할 수 있도록 하는 문서의 일부이며, 해당 정보는 나중에 서버 측에서 승인되고 처리될 수 있습니다. 즉, 양식은 사용자가 입력한 정보를 수집하는 데 사용됩니다.

현재 라벨이 속한 양식 요소를 확인하려면 태그의 for 속성을 사용해야 합니다. . for 속성의 값은 레이블이 적용될 양식 요소의 전역 속성 값과 일치해야 합니다. 요소가 다음과 같은 경우 for 속성을 사용할 수 없습니다. 요소 안에있을 것입니다 .

사용 예를 살펴 보겠습니다.

</span>태그 사용 예 <label><span>

이 예에서는 다음을 수행합니다.

내부에 첫 번째양식:
- 게시됨 둘라디오 버튼( ) 제한된 수의 옵션 중 하나를 선택합니다. 동일한 양식 내의 라디오 버튼에 대해 다시 한 번 참고하세요. 표시해야 함 같은 이름 , 우리는 다른 값을 표시했습니다. 을 위한 첫 번째 selected 는 페이지가 로드될 때 요소가 미리 선택되어야 함을 지정합니다( 이 경우값이 yes 인 라디오 버튼). 또한 요소의 고유 식별자를 정의하는 라디오 버튼에 대한 전역 속성을 지정했습니다.
- 두 요소 배치 , 텍스트 필드의 텍스트 레이블을 정의합니다. 현재 레이블이 속한 양식 요소를 결정하기 위해 for 속성을 사용했습니다. for 속성의 값은 필요한 라디오 버튼의 전역 속성 값에 해당합니다.
내부에 두번째양식:
- 게시됨 둘라디오 버튼( ) 제한된 수의 옵션 중 하나를 선택합니다. 을 위한 두번째라디오 버튼의 경우 페이지가 로드될 때 요소가 미리 선택되어야 함을 나타내는 check 속성을 지정했습니다(이 경우 값이 no 인 라디오 버튼). 또한 양식 내 라디오 버튼에 고유한 값과 동일한 이름을 지정했습니다.
- 두 요소 배치 , 그 안에 라디오 버튼을 배치했습니다. 이전 방법과 달리 라디오 버튼에 대한 전역 속성(요소의 식별자)을 지정할 필요가 없으며 텍스트 레이블에 대한 속성을 사용하여 이를 참조합니다(바인딩 만들기).

브라우저에서는 텍스트 레이블을 사용하는 두 가지 옵션(방법)이 동일하게 보입니다.

입력 필드 도움말

사용 예를 살펴 보겠습니다.

자리 표시자 속성 사용 예 <span>

안에 이 예에서는우리는 요소에 대해 지정했습니다 유형 텍스트(한 줄 텍스트 필드) 및 유형 비밀번호(비밀번호 필드)를 사용하면 입력에 대한 예상 값을 설명하는 사용자용 텍스트 힌트(자리 표시자 속성)입니다.

예제의 결과는 다음과 같습니다.

주제에 대한 질문 및 작업

공부를 시작하기 전에 다음 주제실용적인 작업을 수행하십시오.

귀하가 얻은 지식을 활용하여 다음 주문 양식을 작성하십시오.

주의 사항: 선택이 필요한 필드에서는 요소 자체뿐만 아니라 텍스트를 클릭하여 선택할 수 있어야 합니다.

연습을 완료한 후 다음에서 예제를 열어 페이지 코드를 검사하세요. 별도의 창모든 작업을 올바르게 수행했는지 확인하기 위해.