틀:입력 상자/설명문서: 두 판 사이의 차이

2019년 2월 26일 (화) 12:46 판

이 문서는 틀에 대한 설명문서입니다.
이 문서는 직접 보이지 않게 되어 있습니다. 만일 이 문서가 직접 보인다면, 링크를 확인해 주시기 바랍니다.

아직 베타 버전으로, 안정적이지 않을 수 있습니다.

텍스트를 키보드로 직접 입력할 수 있는 폼을 생성합니다. 이 틀은 한개의 필드만을 포함하고 있으므로 복수의 필드를 이용하시려면 다른 방법을 사용해주세요.

사용법

{{입력 상자|(종류)|(변수)
|(속성1)=(값1)
|(속성2)=(값2)
|...
}}

종류를 입력하지 않을 경우 text가 적용되며, 변수를 입력하지 않을 경우 inpval가 적용됩니다. 단, 종류가 number일 경우 inpnum이 대신 적용됩니다. 자세한 내용은 #속성을 참고해 주세요.

속성

종류

종류	설명
email	올바른 이메일만을 입력하실 수 있습니다.
number	숫자만을 입력하실 수 있으며, {{키패드}}에 대응됩니다.
password	패스워드 입력에 사용되며, 대부분의 문자를 입력할 수 있지만 입력한 내용이 보이지 않습니다.
text	거의 모든 내용을 입력하실 수 있습니다.
url	올바른 URL만을 입력하실 수 있습니다.

범례

값	설명	예시
문자열	한개의 문자열을 입력하는 기본적인 타입입니다.	asdf
목록	여러개의 문자열을 공백으로 구분하여 입력합니다. HTML의 `class`나 `id`와 비슷합니다.	foo bar
숫자	숫자만을 입력할 수 있습니다.	123
부울	참을 의미하는 `true`와 거짓을 의미하는 `false` 등을 입력할 수 있습니다.	false

폼

속성	값 (기본값)	설명
formclass	목록	폼 전체에 적용되는 클래스를 지정합니다.
formid	문자열	폼의 id를 지정합니다.
formstyle	문자열	폼에 적용되는 스타일을 지정합니다. CSS 문법을 이용해 주세요.
novalidate	부울 (`false`)	입력한 값이 유효한지 검사하지 않습니다.
disabled	부울 (`false`)	폼을 비활성화합니다.
page	문자열 (현재 페이지)	완료 버튼을 누를때 이동하는 페이지를 정합니다. 문서 제목을 입력해 주세요.
get	문자열	완료 버튼을 누를 때 함께 적용할 urlget 변수를 지정합니다. {{linkget}}의 get 변수와 같이 입력해 주세요.
pass	부울 (`true`)	{{CGI2}}와 같이 현재 페이지의 urlget 변수를 다음 페이지로 넘겨줍니다.
reset	부울 (`false`)	리셋 버튼을 표시합니다.
legacy	부울 (`true`)	자바스크립트를 사용할 수 없어 이 틀을 이용하지 못할 때, 타입이 `number`일 경우{{키패드}}를, 그 외에는 {{입력기}}를 대신 이용할 수 있게 합니다. 단, 변수를 별도로 지정하신 경우에는 이용하실 수 없습니다.
plugin	부울 (`true`)	플러그인 설치 틀을 표시할지 결정합니다.

필드

속성	값 (기본값)	설명
fieldkey	문자열	필드를 빠르게 선택할 수 있는 단축키를 지정합니다.
autocomplete	부울 (`false`)	최근에 입력한 내용을 빠르게 입력할 수 있는 자동완성 기능을 켜거나 끕니다.
autofocus	부울 (`false`)	페이지가 로드되면 자동으로 필드를 선택합니다.
fieldclass	목록	필드에 적용되는 클래스를 지정합니다.
fieldflag	목록	필드에 플래그를 지정합니다. 플래그 목록에 대해서는 여기를 참고하세요.
fieldicon	문자열	필드 왼쪽에 뜨는 아이콘을 표시합니다. 아이콘에 대해서는 여기를 참고하세요.
fieldicontitle	문자열	아이콘에 마우스를 댔을 때 표시되는 텍스트를 지정합니다.
fieldcontainerid	문자열	필드를 싸고 있는 부모 요소의 id를 지정합니다.
fieldindicator	문자열	필드 오른쪽에 뜨는 인디케이터를 지정합니다. 인디케이터에 대해서는 여기를 참고해 주세요.
fieldindicatortitle	문자열	인디케이터에 마우스를 댔을 때 표시되는 텍스트를 지정합니다.
fieldid	문자열	필드의 id를 지정합니다.
maxlength	숫자	필드에 입력 가능한 최대 길이를 설정합니다.
placeholder	문자열	필드가 비어 있을 때 희미하게 표시되는 설명 텍스트를 설정합니다.
readonly	부울 (`false`)	필드를 입력 불가능한 읽기 전용으로 설정합니다.
required	부울 (`false`)	완료 버튼을 누르기 전에 필드를 반드시 입력해야 합니다.
spellcheck	부울 (`false`)	필드의 맞춤법 검사를 활성화합니다.
fieldtabindex	숫자	탭키를 눌렀을 때 필드가 선택되는 순서를 결정합니다.
fieldtext	문자열	필드 상단에 뜨는 캡션을 지정합니다.
fieldtitle	문자열	필드에 마우스를 댔을 때 표시되는 텍스트를 지정합니다.
validate	문자열	필드를 입력하는 규칙을 설정합니다. 정규표현식을 입력하고자 할 때에는 자바스크립트 스타일로 입력해 주세요.
validatetype	문자열 (`string`)	validate의 형식을 지정합니다. 정규표현식을 사용하고자 할 때는 `RegExp`를, 사전에 지정된 규칙을 사용하고자 할 때는 `string`을 입력하실 수 있습니다.
fieldvalue	문자열	필드의 기본값을 지정합니다.
convert	문자열	필드에 입력한 값을 바탕으로 CGI값을 반환할 방법을 지정한 JSON 데이터를 입력합니다. 변환 테이블 문단을 참고해 주세요.

버튼

속성명은 (종류)(속성)과 같이 입력해 주세요.

종류	설명
reset	입력한 값을 초기화시켜주는 리셋 버튼입니다.
submit	값을 입력하고 urlget 파라미터에 적용시키는 완료 버튼입니다.

속성	값 (reset/submit 기본값)	설명
key	문자열	버튼을 빠르게 선택할 수 있는 단축키를 지정합니다.
class	목록	버튼에 적용되는 클래스를 지정합니다.
flag	목록 (`destructive`/`primary progressive`)	버튼에 적용되는 플래그를 지정합니다. 플래그 목록에 대해서는 여기를 참고하세요.
framed	부울 (reset 활성화: 모두 `false`, reset 비활성화: `true`)	버튼에 테두리를 만듭니다. `true`일 경우 일반적인 버튼의 형태가 되고, `false`일 경우 링크와 비슷한 형태가 됩니다.
icon	문자열 (reset 활성화: `clear`/`check`, reset 비활성화: 없음)	버튼 왼쪽에 뜨는 아이콘을 지정합니다. 아이콘에 대해서는 여기를 참고하세요.
containerid	문자열	버튼을 싸고있는 부모 요소의 id를 지정합니다.
indicator	문자열	버튼 오른쪽에 뜨는 인디케이터를 지정합니다. 인디케이터에 대해서는 여기를 참고해 주세요.
indicatortitle	문자열	인디케이터에 마우스를 댔을 때 표시되는 텍스트를 지정합니다.
id	문자열	버튼의 id를 지정합니다.
label	문자열 (reset 활성화: 모두 없음, reset 비활성화: `OK`)	버튼에 표시되는 텍스트를 지정합니다.
name	문자열	버튼을 눌렀을 때 적용되는 파라미터의 이름을 지정합니다.
tabindex	숫자	탭키를 눌렀을 때 버튼이 선택되는 순서를 정합니다.
text	문자열	버튼 앞에 표시되는 텍스트를 지정합니다.
title	문자열	버튼에 마우스를 댔을 때 표시되는 텍스트를 지정합니다.
value	문자열	버튼을 눌렀을 때 적용되는 파라미터의 값을 지정합니다.

변환 테이블

변환 테이블은 필드의 값을 CGI 값으로 반환하는 방법을 지정한 JSON 데이터로, 지정된 값과 필드의 내용이 일치하는지 확인해서 지정된 방법대로 필드의 내용을 가공해 CGI 값으로 내놓습니다. 모듈:JSON과 함께 사용하면 편리합니다. 변환 테이블은 아래와 같이 구성됩니다.

{
    "case": {
        "필드값1": {
            "prefix": "접두사",
            "value": "대신 출력할 내용",
            "suffix": "접미사",
            "sub": [시작, 끝], /* 입력한 값에서 시작위치부터 끝위치까지의 내용을 추출합니다. */
            "replace": [
                ["찾아서 바꿀 정규식1", "바꿀 내용1"],
                ["정규식2", "내용2"],
                ...
            ]
        },
        "값2": {/* 상동 */},
        ...
    },
    "default": {/* case에 지정되지 않은 값은 default에서 지정된 방법대로 가공됩니다. */
        "prefix": "접두사",
        "value": "대신 출력할 내용",
        "suffix": "접미사",
        "sub": [시작, 끝],
        "replace": [
            ["찾아서 바꿀 정규식1", "바꿀 내용1"],
            ["정규식2", "내용2"],
            ...
        ]
    }
}

예시

이런 문자열를 입력했을 때는 A가 반환되고, 저런 문자열를 입력했을 때는 B가 반환되고, 나머지는 C가 반환될 때

{
    "case": {
        "이런 문자열": {
            "value": "A"
        },
        "저런 문자열": {
            "value": "B"
        }
    },
    "default": {
        "value": "C"
    }
}

전용 틀

혹시 JSON 사용이 어려우시다면, 위키문법만으로 사용이 가능한 변환 테이블 생성 틀도 만나보실 수 있습니다.

틀:입력 상자/ifeq

도보시오

@@ 234번째 줄: / 234번째 줄: @@
 [[분류:입력 틀]]
 [[분류:특수 효과용 틀]]
+[[분류:기술 스택]]
 </includeonly>