> 웹 프론트엔드 > HTML 튜토리얼 > HTML 형식의 일부 용도 요약

HTML 형식의 일부 용도 요약

零下一度
풀어 주다: 2017-06-25 09:46:12
원래의
1556명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿