Building text input boxes

The cftextinput tag in a cfform tag is similar to the HTML input type=text tag or the CFML cfinput type=text tag. With cftextinput, however, you can also specify font and alignment options, use the validate attribute to enable input validation using ColdFusion validation methods or your own JavaScript validation function, and use the required attribute to force the user to enter or change text.

The following example shows a basic cftextinput control. This example validates a date entry, which means that a user must enter a valid date in the form mm/dd/yy (the year can be up to four digits). For a complete list of validation formats, see CFML Reference.

  1. Create a ColdFusion page with the following content:
    Please enter a date:<br>
    <cfform name="Form1"
      action="submit.cfm">
    
      <cftextinput name="entertext"
        value="mm/dd/yy"
        maxlength="10"
        validate="date"
        width=100
        font="Trebuchet MS">
      <br>
      <br>
      <input type="Submit"
          value="Submit">
    
    </cfform>
    
  2. Save the file as textentry.cfm and view it in your browser. The following figure shows the output of this code:

    Example text input box

To get the value of the input text in the action page, use the variable Form.textinput_name; in this case, Form.entertext.

Comments