Text Entry


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        



                
                    var json = {
  "elements": [{
    "name": "username",
    "type": "text",
    "title": "Username"
  }, {
    "name": "email",
    "type": "text",
    "title": "E-mail address",
    "inputType": "email",
    "placeholder": "foobar@example.com",
    "isRequired": true,
    "autocomplete": "email"
  }, {
    "name": "password",
    "type": "text",
    "title": "Password",
    "description": "Enter 8 characters minimum.",
    "inputType": "password",
    "isRequired": true,
    "autocomplete": "password",
    "validators": [{
      "type": "text",
      "minLength": 8,
      "text": "Your password must be at least 8 characters long."
    }]
  }, {
    "name": "url",
    "type": "text",
    "title": "URL",
    "inputType": "url",
    "placeholder": "https://www.example.com",
    "validators": [{
      "type": "regex",
      "regex": "https://.*",
      "text": "Your answer must match the URL pattern."
    }]
  }],
  "showQuestionNumbers": false
};

                    window.survey = new Survey.Model(json);
                
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
        
            $("#surveyElement").Survey({
            model: survey 
            });
        

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Text Entry Question, jQuery Example | JS Form Builder</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/jquery"></script>
    <script src="/DevBuilds/survey-jquery/survey.jquery.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body style="margin: 0">
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
                            </div>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>
Loading...
Sorry, we can't retrieve the data from server. Please comeback later.

Text entry form fields are designed for open-ended questions that demand short answers. You can also require that respondents enter specific values, such as an e-mail address or password. This example demonstrates different types of text box questions supported by SurveyJS Form Library. Switch between React, Vue, Knockout, jQuery, and Angular to view an example for your JavaScript framework.

Create a Text Entry Question

To create a text entry form field, define an object with the type property set to "text" and add it to the elements array. Within this object, specify the question's title and a unique name that identifies the text input question. Optionally, you can specify a description to place under the title and a placeholder to show within the text entry box.

Specify Input Type

If a question requires specific values, use the inputType property to specify the input type. An inputType value is passed on to the type attribute of the underlying <input> HTML element. This example demonstrates the "email", "password", "url", and the default "text" input types.

In addition, you can specify the autocomplete property to let the browser suggest autofill values. For example, the "E-mail address" and "Password" form fields in this demo can be populated automatically if your browser contains autofill e-mail and password values.

Validate Text Values

If you need to ensure that respondents fill out all required form fields and the format of values is correct, enable data validation. This example demonstrates the following validation types and describes how to configure them:

  • Required Validation
    Enable the isRequired property for the form fields that should not be empty.

  • Text Length Validation
    Define an object with the type property set to "text" and add it to the validators array. Use the minLength and maxLength properties within this object to limit the text length (see the "Password" form field in this demo).

  • RegEx Validation
    Define an object with the type property set to "regex" and add it to the validators array. Assign a regular expression to the regex property within this object (see the "URL" form field in this demo).

To learn more about data validation in SurveyJS Form Library, refer to the following help topic: Data Validation.

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.