목차
HTML 양식 태그 요약
입력 필드 input
文本输入区textarea
按钮button
下来菜单select
表单中相关元素分组fieldset
웹 프론트엔드 HTML 튜토리얼 HTML 형식의 일부 용도 요약

HTML 형식의 일부 용도 요약

Jun 25, 2017 am 09:46 AM
form html 형태

HTML 양식 태그 요약

    最近研究 form标签,有一些小心得写下来与大家分享分享,共勉。在小结的最后有一个form表单的小例子,可以作为参考。                                                    -----DanlV
로그인 후 복사


form是HTML的一个极为重要的功能标签之一。
로그인 후 복사


입력 필드 input

  • 입력 유형 속성에는 다음과 같은 속성 값이 있습니다.
    1.버튼 버튼(자세한 내용은 다음 참조)
    2.file은 파일에 사용됩니다. 선택
    3.숨겨진 작업을 실현할 수 있는 숨겨진 필드
    4.text는 텍스트 입력에 사용됨
    5.password는 비밀번호 입력에 사용됨
    6.radio 라디오 버튼, 이름 속성은 그룹과 동일
    7. 체크박스 다중 선택 버튼, 이름 속성은 대체 항목을 정의하는
    8.image 이미지 양식 제출 버튼
    9.reset 양식 재설정 버튼
    10.submit 양식 제출 버튼

  • alt 속성 그룹에 대해 동일합니다.

  • src 속성은 버튼이 이미지일 때 이미지의 링크 주소를 정의합니다.

  • checked 속성은 기본 옵션 <input type="을 정의합니다. radio" name="" selected>checked 값은 true 또는 false이거나 확인됨으로 직접 쓸 수 있습니다. <input type="radio" name="" checked>checked的值为true或false,也可以直接写成checked

  • disabled属性,禁用当前输入域(用法如checked)

  • readonly属性,对当前输入域只读,实际作用与disabled相同,但是展现出来的效果不一样(用法如checked)

  • maxlength属性,定义输入域字符的最大长度

  • name属性,定义当前的输入域的名字

  • value属性,定义当前输入域的默认值


文本输入区textarea

  • rows属性,规定可见行数

  • cols属性,规定可见列数

  • disabled属性,禁用当前文本输入区

  • name属性,当前文本区的名字

  • readonly属性,当前文本区域只读


按钮button

  • type类型一共有三种:
    1.type="button"普功通功能按钮
    2.type="submit"提交form表单功能按钮
    3.type="reset"重置form表单功相关属能按钮

  • disabled属性,禁用此按钮

  • name属性,按钮的名字

  • value属性,按钮上显示文本内容的默认值


下来菜单select

  • 相关属性:
    1.disabled属性,禁用该菜单
    2.multiple属性,规定可同时选中多项
    3.name属性,下拉列表的名字
    4.size属性,菜单中可见项目的数目

  • <optgroup>标签</optgroup>,定义下拉列表的选项分组,属性为:
    5.label属性,定义选项组的标记(名字),必要属性
    6.disabled属性,禁用

  • <optinon></optinon>属性,定义下拉列表中的选项(此标签在<optgroup></optgroup>标签)中,属性为:
    1.disabled属性,禁用
    2.label属性,定义当使用


表单中的标记<label></label>

为了是输入更为人性化,提高用户的体验度,再点击提示文字的时候光标自动聚焦到输入的位置,使用此标签。有两种使用方法:

  • <label for="user"></label> <inpu t type="text" name="user"></inpu>此方式使用label的for属性,值制定输入区域的name

  • <label> <input type="text" name="user"></label>
    将input直接放入label中,不需要使用for属性,推荐使用。
    ---

    表单中相关元素分组fieldset

将表单中相关的元素进行分组,使用<legend></legend>

비활성화된 속성은 현재 입력 필드를 비활성화합니다(사용법은 확인된 것과 같습니다)

HTML 형식의 일부 용도 요약

🎜 현재 입력 필드에 대해 읽기 전용인 readonly 속성 실제 기능은 비활성화와 동일하지만 표시 효과가 다릅니다(체크된 것처럼 사용법) 🎜🎜🎜🎜maxlength 속성은 입력 필드 문자의 최대 길이를 정의합니다. 🎜🎜🎜🎜name 속성은 현재 입력 필드의 이름을 정의합니다. 🎜🎜🎜🎜value 속성은 현재 입력 필드를 정의합니다. 기본값🎜🎜
🎜텍스트 입력 영역 textarea🎜🎜🎜🎜rows 속성 , 표시되는 행 수 지정🎜🎜🎜🎜🎜cols 속성, 표시되는 열 수 지정🎜🎜🎜🎜🎜disabled 속성, 현재 텍스트 입력 영역 비활성화 🎜🎜🎜🎜name 속성, 현재 텍스트 영역의 이름 🎜 🎜🎜🎜readonly 속성, 현재 텍스트 영역은 읽기 전용입니다. 🎜🎜
🎜button 버튼🎜🎜🎜🎜type 총 세 가지 유형이 있습니다: 🎜1.type="button" 일반 기능 버튼 🎜2.type="submit" 양식 제출 양식 기능 버튼 🎜3.type="reset" 양식 기능 재설정 관련 속성 버튼 🎜🎜🎜🎜🎜disabled 속성, 이 버튼 비활성화 🎜🎜🎜🎜name 속성, 해당 항목의 이름 버튼 🎜🎜🎜🎜값 속성, 버튼에 표시되는 텍스트 내용의 기본값 🎜🎜
🎜다운 메뉴 선택🎜🎜🎜🎜관련 속성 : 🎜1.disabled 속성, 메뉴 비활성화 🎜 2.다중 속성, 여러 항목을 동시에 선택할 수 있음을 규정합니다. 🎜3.name 속성, 드롭다운 목록의 이름 🎜4.size 속성, 메뉴에 표시되는 항목 수 🎜🎜🎜🎜<optinon></optinon> 속성은 드롭다운 목록의 옵션을 정의합니다(이 태그는 <optgroup></optgroup> 태그에 있음). 속성은 🎜1.disabled 속성입니다. , 🎜2. 라벨 속성을 비활성화합니다. 🎜🎜
🎜mark를 <label></label>🎜🎜 형식으로 사용할 때 정의됩니다. 입력을 더욱 사용자 친화적으로 만들고 사용자 경험을 향상하려면 클릭하세요. 텍스트를 입력하라는 메시지가 표시되면 커서가 자동으로 입력 위치에 초점을 맞춥니다. 이를 사용하는 방법에는 두 가지가 있습니다: 🎜🎜🎜🎜<label for="user"></label> <inpu t type="text" name="user"></inpu> 이 방법은 label의 for 속성을 사용하여 입력 영역의 이름을 지정합니다🎜🎜🎜🎜<label> <input type="text" name="user"></label> code>🎜 입력은 레이블에 직접 배치되므로 for 속성을 사용할 필요가 없습니다. 🎜---🎜🎜양식 그룹 필드 세트의 관련 요소🎜🎜🎜양식의 관련 요소를 그룹화하려면 <legend></legend> 태그를 사용하여 그룹 제목을 정의하세요. 관련 예제는 마지막 코드를 참조하세요. 🎜🎜코드 예시🎜🎜🎜🎜
        
로그인 후 복사
            
                天下第一争霸赛                                                   
            
            
选武器: 刀                         剑                         枪                         鞭             
挑战对手: 梅超风                             洪七                             金毛狮王谢逊                             张三丰             
            
              
               
                   

위 내용은 HTML 형식의 일부 용도 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

HTML의 테이블 테두리 HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM

HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML의 중첩 테이블 HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 여백-왼쪽 HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML 테이블 레이아웃 HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML 입력 자리 표시자 HTML 입력 자리 표시자 Sep 04, 2024 pm 04:54 PM

HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

HTML 정렬 목록 HTML 정렬 목록 Sep 04, 2024 pm 04:43 PM

HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

HTML 온클릭 버튼 HTML 온클릭 버튼 Sep 04, 2024 pm 04:49 PM

HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.

PHP에서 HTML/XML을 어떻게 구문 분석하고 처리합니까? PHP에서 HTML/XML을 어떻게 구문 분석하고 처리합니까? Feb 07, 2025 am 11:57 AM

이 튜토리얼은 PHP를 사용하여 XML 문서를 효율적으로 처리하는 방법을 보여줍니다. XML (Extensible Markup Language)은 인간의 가독성과 기계 구문 분석을 위해 설계된 다목적 텍스트 기반 마크 업 언어입니다. 일반적으로 데이터 저장 AN에 사용됩니다

See all articles