form 양식 관련

3794 단어

form 폼은 어떤 작용을 합니까?어떤 자주 사용하는 input 라벨이 각각 어떤 작용을 합니까?


개술적 역할

  • HTML 요소는 웹 서버에 정보를 제출하는 데 사용되는 상호작용 제어 소자를 포함하는 문서의 영역을 나타낸다.
  • :valid와:invalid css 위조류로 원소의 스타일을 지정할 수 있습니다.
  • form 속성
  • 서버가 받아들일 수 있는 내용 형식을 포함하여 쉼표로 구분된 목록입니다.accept-charset은 서버가 지원하는 문자 인코딩을 포함하는 빈 칸막이나 쉼표로 구분된 목록입니다.브라우저는 이 인코딩이 열거된 순서로 그것들을 사용합니다.기본값은 "UNKNOWN"보존 문자열입니다.이 문자열은 이form 요소를 포함하는 문서와 같은 인코딩을 가리킨다.이전 버전의 HTML에서는 서로 다른 문자 인코딩을 공백이나 쉼표로 구분할 수 있습니다.HTML5에서는 공백만 구분자로 사용할 수 있습니다.action 이form 정보를 처리하는 프로그램이 있는 URL입니다.이 값은 or 요소의formaction 속성에 다시 불러올 수 있습니다
    autocomplete
    input 요소가 기본값을 가질 수 있는지 표시하는 데 사용됩니다. 이 기본값은 브라우저에서 자동으로 보완됩니다.이 설정은 이form의 하위 요소에 속하는 autocomplete 속성에 다시 불러올 수 있습니다.가능한 값은:off
  • off는 모든 입력 영역에서 사용자가 하나의 값을 현저하게 입력하거나document는 자신의 방식으로 자동 보완을 제공해야 한다.브라우저가 자동으로 입력을 보완하지 않습니다.
  • on 브라우저는 사용자가 이전에 form에 입력한 값에 따라 자동으로 완성할 수 있습니다.

  • enctype
    method 속성 값이post일 때,enctype는form을 서버에 제출하는 내용[MIME 형식]입니다.가능한 값은 다음과 같습니다.
  • 응용 프로그램/x-www-form-urlencoded: 속성이 지정되지 않았을 때의 기본값입니다.
  • multipart/form-data: 이 값은 type 속성이'file'로 설정된 요소에 사용됩니다.3.text/plain (HTML5)

  • method
    브라우저는 이런 방식으로form을 제출합니다.가능한 값은 다음과 같습니다.
  • post: HTTP를 가리키며 폼 데이터는 폼에 포함되어 서버에 전송됩니다.
  • get: URI action 속성에 HTTP 양식 데이터가 첨부되어'?'구분 기호로 이렇게 얻은 URI를 서버에 보냅니다.이렇게 하면 (데이터가 URI에 노출되어) 부작용이 없거나 폼에 ASCII 문자만 포함되어 있을 때 이런 방법을 사용하세요.)

  • name
    이form의 이름입니다.HTML4에서 이 사용법은 추천되지 않습니다. (대체로 id를 사용해야 합니다.)HTML5에서 문서의 여러 form 중name는 빈 문자열만 있는 것이 아니라 유일해야 합니다.
    target의 이름이나 키워드는 폼을 제출한 후에 받은 답장을 어디에 표시할지 표시하는 데 사용됩니다.HTML 4에서 이것은 프레임에 사용되는 이름/키워드입니다.HTML5에서 이것은 브라우징context 브라우저 상하문에 사용되는 이름/키워드입니다. (예를 들어 탭tab, 창 윈도우, or 또는 라인 프레임)다음 키워드에는 특별한 의미가 있습니다. 1._self: 현재 HTML4 또는 HTML5 문서 페이지에서 반환 값을 다시 로드합니다.이것은 기본값입니다.주: 즉, 이 문서가 하나의 프레임에 있다면, self는 전체 페이지 (윈도우) 가 아니라 현재 프레임 (document) 에서 다시 불러옵니다.2._blank: 반환 값을 새 HTML4 또는 HTML5 문서 창으로 로드합니다.3._parent: 상위 프레임에 HTML4 또는 HTML5 문서 형식으로 반환 값을 로드합니다. 상위 프레임이 없으면 비헤이비어와_self 일치.4._top:HTML4 문서인 경우: 현재 문서를 비우고 되돌아오는 내용을 불러옵니다.HTML5: 현재 문서의 최상위 레벨에 반환 값을 로드합니다. 상위 레벨이 없는 경우 및_self의 행위가 일치하다.5.iframename: 지정된 프레임에 반환 값이 로드됩니다.

    예:


    Name:
    Name: Title Click me

    자주 사용하는 input 라벨과 그 역할은?


    그 가치에 따라 어떻게 해야 하는지에 따라 type의 속성이 크게 다르기 때문에 서로 다른 유형은 자신의 단독 참고 페이지에 덮어씌워진다.이 속성을 지정하지 않으면 기본 형식은text입니다.1. [button]: 기본 동작이 없는 단추입니다.
    2. [checkbox]: 확인란을 선택하거나 개별 값을 선택 취소할 수 있습니다.
    3. [color]: 색상을 지정하는 컨트롤입니다.색상 선택기의 UI에는 텍스트로 간단한 색상을 적용하는 대신 필요한 기능이 없습니다.
    4. [date]: 날짜를 입력하는 데 사용되는 컨트롤(연, 월, 일, 시간 없음).
    5. [email]: 전자 메일 주소를 편집하는 필드입니다.
    6. [file]: 사용자가 파일의 컨트롤을 선택할 수 있도록 합니다.accept 속성을 사용하여 컨트롤이 선택할 수 있는 파일 형식을 정의합니다.
    7. [image]: 그래픽 커밋 버튼.이미지의 원본과alt 속성을 정의하기 위해 src 속성을 사용해야 합니다.하이라이트와width 속성을 사용하여 이미지의 크기를 픽셀 단위로 정의할 수 있습니다.
    8.[month]: 한 달과 1년의 컨트롤을 입력하는 데 사용되며, 시간대가 없습니다.
    9. [number]: 숫자를 입력하는 데 사용되는 컨트롤입니다.
    10. [password]: 값이 숨겨진 단일 행 텍스트 필드입니다.maxlength 속성을 사용하여 입력할 수 있는 값의 최대 길이를 지정합니다.
    11. [number]: 숫자를 입력하는 데 사용되는 컨트롤입니다.
    12. [password]: 값이 숨겨진 단일 행 텍스트 필드입니다.maxlength 속성을 사용하여 입력할 수 있는 값의 최대 길이를 지정합니다.
    13. [radio]: 여러 선택 중 하나를 선택할 수 있는 라디오 단추입니다.
    14. [range]: 정확한 값이 중요하지 않은 숫자를 입력하는 컨트롤러입니다.
    15.reset: 양식 내용을 기본값으로 재설정하는 단추입니다.
    16. [search]: 검색 문자열을 입력하는 데 사용되는 단일 텍스트 필드입니다.줄 바꿈은 입력한 값에서 자동으로 삭제됩니다.
    17. [submit]: 폼을 제출하는 단추입니다.
    18.[tel]
     : 。 , 。
    

    컨트롤에 입력된 값을 제한하기 위해pattern과maxlength 같은 속성을 사용할 수 있습니다.19. [text]: 텍스트 필드 한 줄.줄 바꿈은 입력한 값에서 자동으로 삭제됩니다.
    20.[time]
     : 。
    

    21. [url]: URL을 편집하는 필드입니다.커밋하기 전에 입력 값이 빈 문자열이나 유효한 절대 URL로 검증되었습니다.컨트롤에 입력된 값을 제한하기 위해pattern과maxlength 같은 속성을 사용할 수 있습니다.
    22 [week]: 시간대가 없는 요일과 주 번호를 입력하는 데 사용되는 컨트롤입니다.
  • 좋은 웹페이지 즐겨찾기