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

우리는 인터넷에서 웹사이트와 개별 페이지를 만듭니다.방문자와 소통하기 위해

HTML 양식대화형 투표 및 투표를 위해 사이트에 방문자를 등록하고, 메시지를 보내고, 구매하는 등의 작업을 수행하는 데 사용됩니다. HTML이 양식은 다음과 같은 한 가지 목적으로 작성됩니다. 처리를 위해 정보를 수집하고 후속적으로 프로그램 스크립트로 전송하거나 이메일.

샘플 HTML 양식 | 로그인

태그, 속성 및 값

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

샘플 HTML 양식 | 사이트에 대한 의견

태그, 속성 및 값

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

사이의 경우 텍스트를 넣으면 제거하기 쉬운 예로 상자 안에 표시됩니다.

샘플 HTML 양식 | 드롭 다운 목록

태그, 속성 및 값

• - 선택할 항목으로 목록을 정의합니다.
• size="" - 보이는 목록 위치의 수를 결정합니다. 값이 1 이면 드롭다운 목록을 다루고 있습니다.
• - 목록의 위치(점)를 정의합니다.
• value="" - 처리를 위해 지정된 URL로 양식이 보낼 값을 포함합니다.
• selected="selected" - 목록 항목을 예로 선택합니다.

샘플 HTML 양식 | 스크롤 막대가 있는 목록

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

이 옵션의 경우 multiple="multiple" 플래그를 사용하여 여러 항목을 선택할 수 있습니다. 부재로 인해 하나의 항목만 선택할 수 있습니다.

추가로 참조:

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

음, 드롭다운 목록과 텍스트 필드를 만들기 위해 여기에 요소를 추가할 수도 있습니다(Select, Option, Textarea, Label, Fieldset, Legend).

양식이 필요한 이유와 최신 사이트에서 작동하는 방법

이러한 태그를 사용하여 동일한 사이트 검색 문자열()이 생성되며 프로젝트에서 검색하는 것은 필수입니다. 따라서 배치 및 작업 방법을 이해하면 성공적인 디자인 작업에 전혀 방해가되지 않으며 자기 홍보 및 홍보에 불필요하지 않습니다.

따라서 이러한 요소를 연구해야 할 필요성에 대한 근거와 함께 더 이상 질문이 없어야하므로 가능한 옵션에 대한 연구를 직접 진행할 때입니다.

예, 또한 하이퍼텍스트 마크업 언어 주제에 대한 많은 자료(예: three ) 및 .

기본적으로 Forms는 요소로 구성되어 있으며, Form 태그(Checked, Value, Checkbox, Radio, Checkbox, Submit 등)에서 메인 컨테이너 내부에 다양한 태그가 삽입되도록 합니다. 코드를 편리한 위치에 배치하면 됩니다. 이 사이트 템플릿 , 태그 및 해당 속성의 도움으로 표시되는 방식을 지정합니다.

이것은 입력된 요청에 대한 제출 버튼이 있는 텍스트 상자, 라디오 버튼 선택(제공된 버튼 중 하나만 누른 상태로 둘 수 있음), 제출 버튼()이 있는 여러 텍스트 상자 등이 될 수 있습니다.

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

예를 들어 경우에 피드백사용자는 필드에 자신의 이름을 채우고 전자 메일과 메시지 텍스트를 입력한 다음 보내기 버튼을 클릭하면 양식에서 사이트의 전자 메일로 데이터를 보낼 수 있는 권한이 있습니다. 작가. 그러나 불행히도 하나의 하이퍼텍스트 마크업 언어()를 사용하여 이를 구현하는 것은 불가능합니다.

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

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

처음에는 조금 불명확한 것 같지만, 이야기가 진행될수록 모든 것이 명확해질 것이라고 생각합니다.

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

모든 형식은 여는 태그와 닫는 태그로 묶어야 합니다. 형태. 이것은 그들의 창조를 위한 일종의 용기입니다. 이 태그에는 다음과 같은 여러 필수 및 선택적 속성이 있습니다.

1. 이름 - 다음과 같은 경우 지정될 고유한 이름 HTML 파일당신이 무언가를하는 곳에서 여러 웹 양식이 사용됩니다
2. 작업 - 추가 처리를 위해 스크립트의 데이터가 전송될 스크립트의 경로를 나타내는 필수 속성
3. 방법 - 이 웹 양식에서 핸들러 파일 스크립트로 데이터를 전달하는 방법을 변경할 수 있습니다. 지정하지 않으면 기본적으로 get 메소드, 사실, 주로 변수와 짧은 메시지를 위한 것입니다. 열린 길데이터 전달 주소 표시 줄브라우저. 양식 데이터를 핸들러 스크립트에 전달하려면 다음을 사용하는 것이 좋습니다. POST 방식, 폐쇄적인 방식으로 문자 메시지를 전송하기 위해 특별히 설계된

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

Input 및 Type 을 사용하여 다음 요소를 생성할 수 있습니다.

1. 한 줄 텍스트 필드(Type="Text")
2. 비밀번호 필드(Type="Password")
3. 체크박스(Type="체크박스")
4. 라디오 버튼(Type="Radio")
5. 숨겨진 필드(Type="Hidden")
6. 일반 버튼(Type="Button")
7. 핸들러에 데이터를 제출하기 위한 버튼(Type="Submit")
8. 웹 양식을 가져오는 버튼 초기 상태(유형="재설정")
9. 서버에 파일을 업로드하기 위한 필드(Type="File)
10. 이미지 버튼(Type="이미지")

입력에 닫는 태그가 없습니다. 그것을 사용하여 생성되는 웹 양식이 정확히 무엇인지는 전적으로 Type 속성에 지정된 매개변수에 따라 다릅니다. 유형을 지정하지 않으면 기본적으로 텍스트 필드가 생성됩니다.

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

Input 태그의 기타 속성 및 사용 예

나머지 속성의 용도를 고려하십시오.

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

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

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

이 양식은 Input 태그를 두 번 사용하고 한 번은 두 개의 라디오 버튼을 각각 만드는 데 사용합니다. 또한, 각각은 동일한 값(resultat)을 갖는 Name 속성을 가지며, Value 값은 다릅니다(YES 및 NO).

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

확인란(Checkbox)이 있는 웹 양식을 만드는 예를 고려하십시오.

확인란은 한 번에 여러 옵션을 선택할 수 있다는 점에서 라디오 버튼과 다릅니다. Name은 확인란이 설정된 확인란을 처리기 파일에서 결정하는 데 사용되며 Value는 처리기로 보낼 값을 지정합니다(Value가 설정되지 않은 경우 이 확인란 옆에 있는 텍스트가 처리기로 전송됩니다. ).

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

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

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

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

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

저것. Html의 웹 양식이 키를 전송하려는 시도임이 밝혀졌습니다. 모든 운영 체제에서 사용되는 요소, 웹사이트 페이지로 이동합니다. 그러나 사이트 페이지에 필요한 이유는 무엇입니까?

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

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

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

Select 및 Option은 드롭다운 태그입니다.

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

다음과 같이 나타납니다.

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

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

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

이 경우 두 번째 옵션에서 선택한 모든 포인트의 데이터가 서버로 전송됩니다. 생성될 드롭다운 목록은 선택 태그에 다중 속성이 있는지 여부에 따라 결정됩니다.

매개변수 없이 선택에 다중이 지정되었습니다. 그것은 단순히 다중으로 작성되고 그게 다입니다. 존재하는 경우 다중 선택 옵션(Ctrl 또는 Shift 키를 누른 상태)이 있는 드롭다운 목록 웹 양식이 생성됩니다.

드롭다운 목록이 있는 필드의 변형입니다. 객관식 가능, 다음과 같이 보일 것입니다:

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

선택 태그에 다중 속성이 없는 경우 이 드롭다운 목록(행)에서 하나의 요소만 선택할 수 있습니다.

하나의 항목만 선택할 수 있는 예는 다음에서 볼 수 있습니다.

레이블 선택 선택된 웹사이트 범례

옵션 태그 속성

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

드롭다운 목록 항목 그룹을 만들려면 Optgroup 양식의 여는 태그와 닫는 태그로 묶고 여는 Optgroup 태그에 Label 속성을 지정해야 합니다. 원하는 그룹 이름.

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

라벨 선택
선택된 웹사이트 범례

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

고려하지 않은 웹 양식 요소가 하나 더 있습니다. Textarea(입력할 수 있는 필드 여러 줄 문자). 사용하여 생성됩니다. 짝을 이루는 HTML텍스트 영역 태그. 또한 텍스트를 다음으로 전송할 수 있습니다. 새로운 라인전송을 고려하여 서버로 전송됩니다.

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

자신에 대해 무엇을 말할 수 있습니까?

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

하지만 묶는 방법 HTML 요소모양과 텍스트? 이렇게 하려면 속성에 고유한 매개변수가 있는 ID를 추가해야 하며 텍스트를 열고 닫는 Label 태그로 둘러싸여야 합니다. 그게 다가 아닙니다. 여는 Label 태그에서 For 속성을 작성해야 합니다. 이 속성의 매개변수는 양식 요소의 Html 태그에 있는 ID 속성과 정확히 동일해야 합니다. 다음과 같이 나타납니다.

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

Fieldset 및 Legend - 양식을 부분으로 분할

Html의 큰 양식은 프레임에서 원으로 둘러싸인 그룹(Fieldset)으로 나뉘고 이러한 그룹마다 고유한 헤더(Legend)가 있는 것을 자주 보았을 것입니다. 이것은 Fieldset과 Legend의 두 태그를 사용하여 구현됩니다. 그들은 짝을 이루고 있습니다. 그들은 여는 것과 닫는 것이 있어야 합니다.

따라서 그룹을 만들려면 구성 부품 Fieldset 태그를 열고 닫을 때 이러한 모든 부분을 묶어야 합니다. 그리고 이 그룹의 제목(범례)을 설정하려면 열기 Fieldset 직후에 열기 및 닫기 Legend에서 구성을 작성해야 하며 그 사이에 그룹 제목 텍스트를 삽입해야 합니다.

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

행운을 빕니다! 블로그 페이지 사이트에서 곧 만나요

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

선택, 옵션, 텍스트 영역, 레이블, 필드 집합, 범례 - HTML 태그드롭다운 및 텍스트 상자 양식
의 목록 HTML 코드- UL, OL, LI 및 DL 태그
MailTo - 그것이 무엇이며 HTML에서 이메일 링크를 만드는 방법
HTML 및 CSS 코드에서 색상을 설정하는 방법, 테이블에서 RGB 음영 선택, Yandex 결과 및 기타 프로그램
Html Hypertext Markup Language란 무엇이며 W3C 유효성 검사기에서 모든 태그를 나열하는 방법
붙여넣는 방법 HTML 링크그리고 사진(사진) - IMG와 A 태그
Html의 테이블 - Table, Tr 및 Td 태그와 함께 이를 생성하는 Colspan, Cellpadding, Cellspacing 및 Rowspan
글꼴(Face, Size 및 Color), Blockquote 및 Pre 태그는 순수 HTML의 레거시 텍스트 형식입니다( CSS 사용)
하이퍼링크(A, Href, 대상 공백)를 만드는 방법, 사이트의 새 창에서 열리는 방법, Html 코드로 이미지를 링크하는 방법

태그 덕분에 드롭다운 목록과 다중 선택 목록을 만드는 것이 가능해졌습니다. 서버에 데이터를 보내려는 경우 태그 형식(태그

select 태그의 속성은 무엇입니까?

꼬리표 세 가지 유용한 속성이 있습니다(나머지는 고려하지 않을 것이며 이미 이야기했습니다). 첫 번째 속성은 multiple 이므로 여러 목록 항목을 선택할 수 있습니다. 여러 요소를 선택하려면 shift 또는 ctr을 누른 상태에서 원하는 요소를 마우스로 클릭해야 합니다. 다음은 다중 속성을 사용하는 예입니다.

어떤 이름을 좋아하세요?
없음
이반
베드로
니콜라스

두 번째 속성은 required 입니다. 이 속성을 사용하면 양식을 제출하기 전에 목록을 선택해야 함을 브라우저에 "알릴" 수 있습니다. 그렇지 않으면 브라우저에서 양식 제출을 금지하고 적절한 메시지를 표시합니다. 이 메시지의 모양은 전적으로 브라우저에 따라 다르며 사용자는 변경할 수 없습니다. 다음은 필수 속성을 사용하는 예입니다.

세 번째 속성은 표시할 목록 항목의 수를 지정하는 데 사용할 수 있는 size 입니다. 크기 속성에는 정수만 포함될 수 있습니다. size 속성은 목록을 변환합니다. 예를 들어, 1과 같으면 태그가 는 "드롭다운 목록"으로 표시되고 크기 속성이 1보다 크면 드롭다운 목록은 "스크롤링 목록"으로 표시됩니다. 다음은 size 속성을 사용하는 두 가지 예입니다.

예 혹은 아니오?
예
아니다

사이트나 블로그를 만들고 내용을 채우는 과정에서 여러 가지 이유로 텍스트의 일부를 숨길 필요가 있고, 당분간 숨겨진 블록에 더 방대한 정보를 배치하지만 여전히 표시해야 하는 경우가 있습니다. 사용자가 사용할 수 있는 것을 한 가지 더 제공하고 다음 줄이나 페이지로 이동하지 않고 숨겨진 콘텐츠를 볼 수 있는 기회를 제공합니다.
이전에는 이러한 솔루션을 구현하기 위해 많은 자바스크립트가 사용되었지만 이제는 놀라운 속성 덕분에 이 모든 작업을 매우 쉽게 수행할 수 있습니다.

오늘 우리가 살펴볼 가장 간단한 방법 CSS3 속성만 사용하여 텍스트의 특정 요소를 클릭할 때 열리는 개별 메시지와 사이트 페이지의 콘텐츠로 숨겨진 블록을 만듭니다. 단일 단어, 선택한 구문, 전체 문장 또는 정보 아이콘이 스위치 역할을 할 수 있습니다.
이러한 블록은 많은 양의 콘텐츠가 포함된 페이지에서 자주 사용되며, 보다 구조화되고 간결하게 만들기 위해 모든 콘텐츠는 제목만 사용자에게 표시되는 소위 그룹으로 나누어지고 모든 텍스트는 다음으로 숨겨집니다. 기본값이며 특정 요소를 클릭하면 볼 수 있습니다(위 참조).

과도한 물을 사용하지 않고 작동하는 이 간단한 메커니즘을 모두 살펴보겠습니다. 좋은 예, 원하는 경우 편집할 수도 있습니다.

예 #1

드롭다운 블록의 스위치 역할에서 추가 정보강조 표시되거나 표시된 텍스트는 사용되지 않으며 클릭할 수 있는 명확한 제안과 함께 두려움과 의심 없이 볼 수 있어야 함)))

보시다시피 모든 것이 정상 이상으로 작동합니다. 숨겨진 콘텐츠는 문제 없이 나타나고 약간의 마우스 클릭으로 사라집니다. 동시에 html 프레임과 형식 모두에서 실행 가능한 코드를 최소화했습니다. CSS 스타일의. 연결 없이 추가 자바스크립트영원한 불안을 안고 도서관이 사용자 측에서 비활성화되었는지 여부.
이 모든 작업을 구현하려면 CSS3 의사 클래스 덕분에 가능했습니다. : 체크라디오 버튼()과 같은 인터페이스 요소에 적용됩니다. 태그에서 실제로 수행한 작업 type 속성에 체크박스 값을 할당하고 고유 식별자에 해당하는 id="hd-1" 식별자를 할당했습니다. for="hd-1"현재 블록의 스위치. .hide 클래스의 display: none 속성을 설정하여 체크박스를 완전히 그리고 영원히 숨깁시다.
사실 여기에서는 특별히 설명할 것이 없습니다. 숨겨진 블록을 켜고 끄는 전체 메커니즘은 세 가지 요소로 구성됩니다.

• 체크박스 - 태그 의미를 가지고 체크박스기인하다 유형그리고 특정 바인딩 식별자로
• 제목(텍스트 라디오 버튼) - 태그 속성에 대한 고유 식별자 값 포함 ~을 위한, (식별자는 태그의 식별자와 동일해야 합니다. 입력의미를 가지고 체크박스기인하다 유형).
• 콘텐츠 블록은 사용자가 클릭할 때까지 다양한 숨겨진 콘텐츠(텍스트, 이미지 등)를 포함하는 div 태그입니다.

나는 혼란스러운 설명을 통해 전체 속임수가 무엇인지 분명해지기를 바랍니다. CSS는 의사 클래스를 사용하여 새로운 스타일을 적용합니다. 체크) 사용자가 고유 ID로 확인란과 연결된 요소를 클릭할 때만 이전에 숨겨졌던 콘텐츠 블록을 표시합니다.

이 모든 것에서 중요 사항:

동일한 페이지에서 여러 개의 숨겨진 블록을 사용할 때 각 라디오 버튼에는 다른 블록의 ID와 다른 고유한 ID가 있어야 합니다.

즉, 우리는 어디에, 왜 가는지 분류했습니다. 이제 전체 구조의 html 프레임워크를 살펴보겠습니다.

열려면 여기를 클릭하십시오!

다음으로, 우리는 형성에 직접 진행합니다 CSS 스타일, 전체 구조가 작동하지 않습니다. 스타일 지정 없이 최소한의 코드만 드롭다운 상자의 배경을 강조 표시하여 숨겨진 텍스트 프레임을 정의하고 표시합니다. 원하는대로 블록을 장식하거나 테두리를 걸거나 모서리를 둥글게하거나 텍스트를 강조 표시하거나 .

1. CSS

/* 체크박스와 콘텐츠 블록 숨기기 */ .hide, .hide + label ~ div ( display: none; ) /* label 텍스트 보기 */ .hide + label, .hide:checked + label ( padding: 0; color: green ; cursor: pointer; border-bottom: 1px dotted green; ) /* 라디오 버튼이 활성화되었을 때 레이블 텍스트 보기 */ .hide:checked + label ( color: red; border-bottom: 0; ) /* 체크박스일 때 상자 표시 콘텐츠와 함께 활성 상태입니다 */ .hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px # 7d8e8f; 상자 그림자: 삽입 3px 3px 10px #7d8e8f; 패딩: 10px; )

이것은 금욕적인 예로서, 충분히 최소한의 것입니다. 그러나 결국 우리는 빵을 최소한 몇 개 걸지 않으면 전혀 우리가되지 않을 것이며 사용자가 클릭 할 위치를 시각적으로 제안하는 것이 좋습니다.
두 번째 예에서는 플러스 형태의 간단한 기호를 추가했습니다. 이는 여기에 다른 것이 숨겨져 있음을 분명히 나타냅니다. 누르면 즉시 마이너스로 바뀌고 콘텐츠가 있는 숨겨진 블록의 경우 다음과 같은 경우 약간의 애니메이션을 망쳤습니다. 그들은 CSS3 마술의 도움으로 독점적으로 나타납니다.

2. CSS

/* 체크박스와 콘텐츠 블록 숨기기 */ .hide, .hide + label ~ div ( display: none; ) /* label text view */ .hide + label ( margin: 0; padding: 0; color: green; cursor : 포인터; 표시: 인라인 블록; ) /* 라디오 버튼이 활성화되어 있을 때 텍스트 보기에 레이블 표시 */ .hide:checked + label ( color: red; border-bottom: 0; ) /* 체크박스가 활성화되면 내용이 있는 블록 표시 */ .hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f; margin-left: 20px; padding: 10px; /* 나타날 때 약간의 애니메이션 */ -webkit-animation:fade easy-in 0.5s; -moz-animation:fade easy-in 0.5초, 애니메이션: 페이드 인 0.5초, ) /* 숨겨진 블록이 나타날 때의 애니메이션 */ @-moz-keyframes 페이드 ( ( opacity: 0; ) 에서 ( opacity: 1 ) ) @-webkit-keyframes 페이드 ( ( 불투명도: 0 ; ) 에서 ( 불투명도: 1 ) ) @keyframes 페이드 ( ( 불투명도: 0; ) 에서 ( 불투명도: 1) ) ) .hide + label:before ( background-color: #1e90ff; 색상: #fff; 내용: "\002B"; 디스플레이:블록; 왼쪽으로 뜨다; 글꼴 크기: 14px; 글꼴 두께: 굵게; 높이: 16px; 줄 높이: 16px; 여백: 3px 5px; 텍스트 정렬: 가운데; 너비: 16px; -웹킷 테두리 반경: 50%; -moz-border-radius: 50%; 경계 반경: 50% ) .hide:checked + label:before ( 내용: "\2212"; )

모든 설명에 따르면 이 방법은 의심할 여지 없이 훌륭하지만 항상 그렇듯이 전혀 놀라운 일도 아니지만 영원한 진행 브레이크, IE 브라우저, 의사 클래스에 문제가 발생합니다. 체크이 브라우저의 9번째 및 최신 버전만 지원합니다. 이전 버전의 IE의 경우 이전과 동일하므로 javascript를 사용해야 합니다.

숨겨진 확인란을 사용하여 , 스타일 블록, 슬라이더, 갤러리 등을 쉽게 구현할 수 있습니다.

모든 존경과 함께 앤드류

양식 속성:

• action 속성은 다음을 지정합니다. 서버 파일양식에서 보낸 데이터의 주요 처리를 담당하는 스크립트와 함께. 일반적으로 이 파일의 코드는 다음과 같은 서버 측 프로그래밍 언어로 작성됩니다. PHP또는 펄.
• enctype 속성은 서버에 전송되는 정보의 유형을 나타내며, 텍스트 데이터인 경우 - text/plain , 파일이 양식과 함께 전송되는 경우 multipart/form-data를 지정해야 합니다.
• method 속성은 데이터 전송 형식을 지정하고 정의합니다. 이에 대해 자세히 설명하지는 않겠지만 보다 안정적인 전송을 위해서는 post 방식을 지정해야 합니다.

HTML 양식 요소

<입력 유형 = "텍스트" 이름 = "로그인" 크기 = "20" 값 = "(!LANG:로그인" maxlength = "25" > !}

결과:

• type 속성 값 - text -는 이것이 텍스트 필드임을 나타냅니다.
• size - 텍스트 필드의 문자 크기
• maxlength - 필드에 맞는 최대 문자 수
• value - 텍스트 필드의 초기 텍스트
• name - 핸들러 파일에서 데이터 처리에 필요한 요소의 이름

결과:


텍스트 대신 별표 또는 원과 같은 마스크가 필드에 표시됩니다.

<입력 유형 = "제출"값 = "데이터 보내기">

결과:

제출 버튼은 사용자가 입력한 모든 양식 데이터를 수집하여 양식의 action 속성에 지정된 주소로 보냅니다.

<입력 유형 = "재설정" 값 = "(!LANG:형식 지우기" > !}

결과:

버튼은 모든 컨트롤의 상태를 원래 상태로 되돌립니다(양식 지우기).

<입력 유형 = "확인란" 이름 = "asp" 값 = "(!LANG:예" > !} A.S.P.<브 > <입력 유형 = "확인란" 이름 = "js" 값 = "(!LANG:예" checked = "checked" > !}자바스크립트<브 > <입력 유형 = "확인란" 이름 = "php" 값 = "(!LANG:예" > !} PHP<브 > <입력 유형 = "확인란" 이름 = "html" 값 = "(!LANG:예" checked = "checked" > !} HTML<브 >

A.S.P.
자바스크립트
PHP
HTML



결과:

A.S.P.
자바스크립트
PHP
HTML

html에서 체크박스는 다중 선택을 구성하는 데 사용됩니다. 여러 답변을 선택하는 것이 필요하고 가능한 경우

<입력 유형 = "라디오" 이름 = "책" 값 = "(!LANG:asp" > !} A.S.P.<브 > <입력 유형 = "라디오" 이름 = "책" 값 = "(!LANG:js" > !}자바스크립트<브 > <입력 유형 = "라디오" 이름 = "책" 값 = "(!LANG:php" > !} PHP<브 > <입력 유형 = "라디오" 이름 = "책" 값 = "(!LANG:html" checked = "checked" > !} HTML<브 >

A.S.P.
자바스크립트
PHP
HTML




결과:

A.S.P.
자바스크립트
PHP
HTML

라디오 버튼 html은 여러 옵션에서 단일 선택을 제공합니다.

checked 속성은 즉시 요소를 checked로 설정합니다.

중요한:요소의 경우 라디오속성 값이 필요합니다. 이름그룹의 모든 요소는 동일했습니다. 이 경우 요소는 상호 연결되어 작동하며, 한 요소가 켜지면 다른 요소가 꺼집니다.

드롭다운 목록 HTML

드롭다운 목록을 추가하는 예를 고려하십시오.

A.S.P. 자바스크립트 PHP HTML

결과:

• 드롭다운 목록은 닫는 쌍이 있는 기본 태그인 select로 구성되며 각 목록 항목은 항목의 텍스트가 표시되는 옵션 태그입니다.
• 값이 있는 크기 속성 "하나"축소된 형식의 목록이 하나의 항목을 표시하고 나머지는 메뉴 화살표를 클릭할 때 열림을 나타냅니다.
• 항목(옵션)의 선택된 속성은 이 특정 항목이 처음에 표시되고 나머지 항목이 "축소"됨을 나타냅니다.

크고 복잡한 목록의 경우 옵션이 있습니다. 자막 추가- 레이블 속성이 있는 optgroup 태그(비문):

A.S.P. 자바스크립트 PHP HTML 러시아어로 된 ASP 러시아어 자바스크립트

기회를 제공하기 위해 동시에 여러 항목 선택다중 속성을 추가해야 합니다. 그러나 이 경우 크기 속성도 1보다 큰 값으로 설정해야 합니다.

텍스트

결과:

• 요소의 너비는 가로로 맞는 문자 수를 지정하는 cols 속성에 따라 다릅니다.
• rows 속성은 요소의 행 수를 지정합니다.

기타 요소

추가 요소 및 속성

• 컨트롤용 라디오그리고 체크박스첫 번째로 라디오 또는 체크박스 요소 자체에 텍스트 앵커를 만들고 두 번째로 클릭할 때 획을 추가하는 추가 요소를 사용하는 것이 편리합니다.

<입력 유형="확인란" id="책1"> <레이블 for="book1"> A.S.P.</라벨>

A.S.P.

예제에서는 확인란 요소에 대한 레이블(레이블 태그)이 생성됩니다. 바인딩은 id 속성을 통해 수행되며 값은 레이블의 for 속성에 지정됩니다.

결과:



• disabled 속성을 사용하면 요소를 비활성화하여 사용자가 편집할 수 없도록 할 수 있습니다.

<입력 유형 = "텍스트" 이름 = "로그인" 크기 = "20" 값 = "(!LANG:로그인" maxlength = "25" disabled = "disabled" >!} <입력 유형 = "확인란" 이름 = "asp" 값 = "(!LANG:예" > !} A.S.P.<브 > <입력 유형 = "확인란" 이름 = "js" 값 = "(!LANG:예" checked = "checked" disabled = "disabled" > !}자바스크립트<브 >


A.S.P.
자바스크립트