윅스 (Wix) 코딩 - 사용자 입력 요소 (Working with User Input Elements)

윅스 (Wix) 코딩 - 사용자 입력 요소 (Working with User Input Elements)

 

 

 

설명)

 

윅스(Wix)에는 데이터베이스 컬렉션에서 방문자 데이터를 캡처, 저장, 표시 및 편집할 수 있는 다양한 사용자 입력 요소가 있습니다. 이러한 요소를 사용하여 사용자 입력을 위한 양식을 직접 작성할 수 있습니다. 선택하는 요소는 주로 캡처 또는 표시하려는 정보의 유형과 방문자가 선택할 수있는 옵션을 제공할지 여부에 따라 다릅니다. 사용자가 입력하는 데이터를 저장하려면 제출 버튼을 사이트에 추가해야합니다.

 

 

 

사용자 입력 및 인터렉티브(대화형) 요소 (User Input and Interactive Elements)

사용 가능한 사용자 입력 및 기타 대화형 요소 목록은 다음과 같습니다.

 

 

텍스트 입력 (Text Input)

입력 상자 요소는 소량의 텍스트나 숫자를 입력하거나 편집하는 데 사용됩니다.

 

입력 상자는 특정 유형의 정보를 허용하도록 구성할 수 있습니다. 예를 들어, 사용자가 결정한 구성의 전화 번호만 수락하도록 입력 상자를 구성 할 수 있습니다. 선택한 입력 상자 요소의 유형은 양식의 유효성 검사와 함께 사용 가능한 설정에 영향을 줍니다. 예를 들어 암호 유형을 선택하는 경우 입력 길이를 제한하고 패턴 유효성 검사를 추가할 수도 있습니다.

 

입력 상자의 유형은 다음과 같습니다.

• 텍스트

• 암호

• 번호

• 이메일

• URL

• 전화 번호

 

입력 상자는 텍스트 및 숫자 입력란(필드)에 연결할 수 있습니다.

 

(윅스 코드(Wix Code) 만 해당) 입력란(필드)은 검색 입력란(필드)로 사용하여 방문자가 검색 기준을 입력할 수 있도록 하는 것이 이상적입니다.

 

 

 

텍스트 상자 (Text Box)

텍스트 상자는 여러 줄 문자를 포함하여 많은 양의 텍스트를 입력하거나 편집할 때 사용됩니다. 텍스트 상자는 텍스트 및 숫자 입력란(필드)에 연결할 수 있습니다.

 

서식있는 텍스트 (Rich Text)

서식있는 텍스트 입력 요소는 서식있는 텍스트의 입력, 편집 및 서식 지정에 사용됩니다. 그들은 굵게, 밑줄, 기울임 꼴 문자 스타일, 2 개의 제목 수준, 단락 스타일, 텍스트 맞춤 및 글 머리 기호 및 번호 매기기 목록을 지원합니다. 하이퍼 링크를 허용하도록 선택적으로 설정할 수 있습니다.

 

서식있는 텍스트 요소는 서식있는 텍스트 입력란(필드)에 연결할 수 있습니다.

 

라디오 버튼 (Radio Buttons)

라디오 버튼은 여러 가지 옵션 중 하나를 선택하는 데 사용됩니다. 라디오 버튼에는 라벨과 값이 있습니다. 레이블은 페이지에 표시되는 텍스트이며 값은 컬렉션에 저장되는 데이터입니다.

 

라디오 버튼을 사용하여 컬렉션의 정보를 표시할 수도 있습니다. 예를 들어 콜렉션의 열이 세 가지 값 (예 : 세 개의 다른 위치) 중 하나를 가질 수있는 경우 라디오 버튼을 해당 열에 연결하여 각 페이지에 올바른 값을 표시 할 수 있습니다.

 

(윅스 코드(Wix Code) 에만 해당) 라디오 버튼 요소를 사용하면 사용자가 페이지에 표시되는 내용을 필터링할 수 있습니다. 이전 예제를 계속 진행하려면 방문자가 버튼 중 하나를 선택하고 해당 위치와 일치하는 항목만 볼 수 있도록 라디오 버튼 요소에 코드를 작성할 수 있습니다.

 

라디오 버튼은 텍스트 입력란(필드)에 연결할 수 있습니다.

 

드롭다운 목록 (Dropdown List)

드롭다운 목록은 여러 가지 옵션 중 하나를 선택하는 데 사용됩니다. 컬렉션의 입력란(필드)에서 옵션을 유지 관리하려는 경우 특히 유용합니다. 라디오 버튼과 마찬가지로 드롭다운 목록에는 라벨과 값이 있으며 라벨은 페이지에 표시되는 텍스트이며 값은 컬렉션에 저장되는 데이터입니다.

 

드롭다운 목록 관리 패널에서 드롭다운의 옵션 목록을 수동으로 만들 수 있습니다. 또는 컬렉션의 기존 열을 사용하여 드롭다운 목록을 채울 수도 있습니다. 드롭다운 목록을 참조 입력란(필드)에 연결할 수도 있습니다. 이 경우 값 목록은 참조된 컬렉션의 기본 입력란(필드)에서 가져옵니다.

 

(윅스 코드(Wix Code) 에만 해당) 드롭다운 목록은 필터 기능을 제공하는 데 이상적입니다.

 

드롭다운 목록은 텍스트, 숫자 및 참조 입력란(필드)에 연결할 수 있습니다.

 

체크박스 (Checkbox)

체크박스는 선택 또는 선택 취소할 수 있으며 단일 예 또는 아니오 선택에 사용됩니다. 해당 Boolean 값이 컬렉션에 저장됩니다.

 

체크박스를 사용하여 방문자에게 정보를 표시할 수도 있습니다. 예를 들어 요리법 컬렉션이 있고 부울 필드 중 하나가 "채식주의자"인 경우 해당 열에 체크박스를 연결하여 완전 채식 요리 선택란에 체크박스를 선택하고 채식주의가 아닌 요리법에 대해서는 선택을 취소할 수 있습니다.

 

체크박스는 Boolean 필드에 필터 기능을 제공할 수 있습니다. 예를 들어 모든 요리법을 나열하는 페이지가 있는 경우 완전 채식 요리법을 걸러내는 "채식주의자" 체크박스를 추가할 수 있습니다.

 

페이지에 체크박스를 추가하면 실제로 전체 체크박스 기능을 제공하기 위해 함께 그룹화된 체크박스와 텍스트 요소가 추가됩니다.

 

텍스트 요소는 체크박스에 라벨을 제공하여 방문자에게 제공하는 선택 사항을 식별할 수 있습니다. 체크박스 자체는 방문자가 클릭할 것입니다. 텍스트 요소 설정과 독립적인 자체 설정이 있습니다.

 

처음 체크박스 그룹을 클릭하면 전체 그룹이 선택됩니다. 체크박스이나 텍스트 요소를 하나만 선택하려면 그룹을 클릭한 후 다시 클릭합니다. 그런 다음 각 요소의 설정에 액세스할 수 있습니다.

 

체크박스는 Boolean 필드에만 연결할 수 있습니다.

(윅스 코드(Wix Code) 에만 해당) 체크박스는 페이지의 자바스크립트(JavaScript) 코드에서 사용할 수있는 값을 가지고 있습니다.

 

평점 입력 (Ratings Input)

평점 입력 요소를 사용하면 평점을 나타내는 아이콘 하나에서 다섯 개를 클릭하여 방문자가 평점을 입력할 수 있습니다. 사용자가 각 평점 위에 마우스를 가져갈 때 요소가 사용자 정의된 텍스트를 표시해야하는지 여부를 결정할 수 있습니다.

 

평점 입력 요소는 사용자 선택을 숫자로 저장하고 컬렉션의 숫자 입력란(필드)에 연결할 수 있습니다.

 

평점 표시 (Ratings Display)

평점 표시 요소를 사용하면 아이콘을 사용하여 사용자에게 값을 표시할 수 있습니다. 예를 들어 요리법 사이트가 있는 경우 평점 표시 요소를 사용하여 요리법이 얼마나 쉬운 지와 완료하는 데 걸리는 시간을 나타낼 수 있습니다. 여행사를 운영하는 경우 평점 표시 요소를 사용하여 각 하이킹의 어려움이나 가족에게 적합한지 여부를 나타낼 수 있습니다.

 

평점은 1-5의 평점 값과 선택적으로 총 평점 수의 두 값으로 구성됩니다. 평점 요소에 이 두 값이 모두 있는 경우 이 정보를 다른 모든 SEO 데이터와 함께 Google에 제출할 수 있습니다. 페이지가 검색 결과에 나타날 때 평점이 표시 될 수 있습니다.

 

(윅스 코드(Wix Code) 만 해당) 평점 표시 요소를 사용하여 사용자로부터받은 평점을 표시할 수도 있습니다. 페이지에 복사하여 붙여넣을 수 있는 코드를 포함해 이 작업을 수행하는 방법에 대한 단계별 지침은 이 문서를 참조합니다.

 

평점 표시 요소는 숫자 입력란(필드)에 연결할 수 있습니다.

 

슬라이드 (Slider)

슬라이드를 사용하면 트랙에서 핸들을 슬라이드하여 숫자를 입력할 수 있습니다. 슬라이드의 최소값과 최대 값은 물론 기본값을 정의할 수 있습니다. 사용자가 정의한 범위 내에서 값을 선택할 수 있는 연속 슬라이드와 방문자가 일련의 값에서 선택해야하는 단계식 슬라이드 중에서 하나를 선택할 수 있습니다.

 

단계는 값 또는 숫자로 설정할 수 있습니다.

- 값 : 각 단계를 얼마나 크게 할 것인지를 정의합니다. 슬라이드의 단계 수는 자동으로 계산됩니다. 예를 들어 사용자가 정수에서 선택하도록 하려면 값을 선택한 다음 각 단계의 크기를 1로 설정합니다.

- 숫자 : 슬라이드에 몇 개의 단계가 있어야 하는지 정의합니다. 각 단계의 크기는 자동으로 계산됩니다.

 

슬라이드는 숫자 입력란(필드)에 연결할 수 있습니다.

 

페이지 번호바 (Pagination Bar)

페이지 번호바를 사용하면 사용자가 컬렉션의 항목을 탐색할 수 있습니다. 특히 반복 레이아웃과 함께 사용할 때 유용합니다. 페이지 번호바를 요소와 동일한 데이터세트에 연결하면 데이터세트 설정에 정의된 페이지 크기에 따라 데이터세트에서 사용 가능한 페이지 수가 자동으로 읽혀집니다. 방문객은 반복 레이아웃의 페이지를 탐색하거나 보려는 항목의 특정 페이지를 선택할 수 있습니다.

 

페이지 번호바는 데이터세트에 직접 연결됩니다. 여기에서 페이지 번호바를 사용하여 작업하는 방법에 대해 자세히 읽을 수 있습니다.

 

스위치 (Switch)

체크박스와 마찬가지로 스위치는 켜기 또는 끄기 중 하나일 수 있습니다. 그들은 하나의 예 또는 아니오 선택에 사용됩니다. 해당 Boolean 값이 컬렉션에 저장됩니다.

 

체크박스와 달리 스위치는 필수 항목으로 정의할 수 없습니다. 또한 스위치에는 텍스트 요소가 포함되지 않습니다. 방문자가 스위치의 켜기 / 끄기 설정을 나타내기 위해 자신만의 텍스트 요소를 추가할 수 있습니다.

 

스위치를 사용하여 방문자에게 정보를 표시할 수도 있습니다. 예를 들어 요리법 컬렉션이 있고 부울 입력란(필드) 중 하나가 "채식주의자"인 경우 해당 스위치를 연결하여 채식요리법을 사용하도록 설정하고 고기가 포함된 요리법을 사용하지 않도록 설정할 수 있습니다.

 

스위치는 Boolean 입력란(필드)에 필터 기능을 제공할 수 있습니다. 예를 들어 모든 요리법을 나열하는 페이지가 있는 경우 채식 요리법을 걸러내는 "채식"스위치를 추가할 수 있습니다.

 

스위치는 부울 필드에 연결할 수 있습니다.

 

(윅스 코드(Wix Code)에만 해당) 스위치는 페이지의 자바스크립트(JavaScript)코드에서 사용할 수 있는 값을 가질 수도 있습니다.

 

업로드 버튼 (Upload Button)

업로드 버튼은 방문자가 파일을 업로드하는 데 사용됩니다. 업로드 버튼를 사용하려면 버튼 설정을 설정하고 제출 버튼를 추가해야합니다.

 

업로드 버튼은 이미지 또는 문서 입력란(필드)에 연결할 수 있습니다.

 

사용자가 사용자가 업로드한 파일이나 컬렉션에 직접 저장한 파일을 사용자가 컬렉션에서 다운로드하도록 할 수도 있습니다.

1. 링크를 추가할 수있는 요소 (버튼, 표, 이미지, 갤러리)를 선택합니다.

2. 요소의 데이터 연결 패널에서 "링크 연결하기"아래에 있는 파일을 저장하는 컬렉션의 입력란(필드)에 대한 링크를 설정합니다.

3. 방문자가 링크된 요소를 클릭하면 파일이 자동으로 장치로 다운로드됩니다.

 

날짜 선택기 (Date Picker)

날짜 선택기를 사용하면 방문자가 캘린더 팝업을 사용하여 날짜를 선택하여 날짜 입력란(필드)를 채울 수 있습니다.

 

날짜 선택 도구 요소를 사용하여 시간을 표시하지 않고 날짜를 표시할 수도 있습니다.

 

(윅스 코드(Wix Code)에만 해당) 날짜 선택 도구 요소는 검색 및 필터 기능을 제공할 수 있습니다. 예를 들어 방문자는 날짜 범위를 기준으로 특정 날짜 또는 필터에서 항목을 검색 할 수 있습니다.

 

날짜 선택 도구는 날짜 및 시간 입력란(필드)에 연결할 수 있습니다.

 

시간 선택기 (Time Picker)

시간 선택기는 방문자가 시간 값을 입력하는 쉬운 방법을 제공합니다.

방문자는 텍스트로 시간을 입력하거나, 드롭다운에서 시간을 선택하거나, 스테퍼를 사용하여 목표 값에 도달할 때까지 시간을 늘리거나 줄일 수 있습니다.

시간 선택기를 사용하여 시간을 표시할 수도 있습니다.

시간 선택기는 시간 입력란(필드)에 연결할 수 있습니다.

사용자 입력 양식을 작성하는 방법은 여기를 참조합니다.

사용자가 윅스 코드(Wix Code)로 표시된 데이터를 검색하거나 필터링하도록하는 방법을 보려면 여기를 참조합니다.

 

 

 

 

연관된 토픽)

윅스 (Wix) 코딩 예제 - 데이터베이스 컬렉션에 사용자 입력 저장 양식 만들기 (Wix Code Tutorial: Creating a Form to Store User Input in a Database Collection)

윅스 (Wix) 코딩 - 코드로 사용자 입력 유효성 검사하기 (Wix Code: About Validating User Input with Code)

윅스 (Wix) 코딩 예제 - 데이터베이스 컬렉션에 데이터 편집 양식 만들기 (Wix Code Tutorial: Creating a Form for Editing Data in a Database Collection)

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

https://support.wix.com/en/article/working-with-user-input-elements-9560341