PRADO QuickStart Source View

/Controls/Samples/TTextBox/Home.page

<com:TContent ID="body">

<h1>TTextBox Samples</h1>

<h2>SingeLine Text Boxes</h2>

<table class="sampletable">

<tr><td class="samplenote">
Text box with default settings:
</td><td class="sampleaction">
<com:TTextBox />
</td></tr>

<tr><td class="samplenote">
Text box with customized color, font, columns, maximum length:
</td><td class="sampleaction">
<com:TTextBox
	Text="text"
	ForeColor="yellow"
	BackColor="blue"
	Font.Size="14pt"
	Columns="4"
	MaxLength="6"
/>
</td></tr>

<tr><td class="samplenote">
Text box with AutoCompleteType:
</td><td class="sampleaction">
Disabled: <com:TTextBox AutoCompleteType="Disabled" />
Enabled: <com:TTextBox AutoCompleteType="Enabled" />
</td></tr>

<tr><td class="samplenote">
Disabled text box:
</td><td class="sampleaction">
<com:TTextBox Text="disabled" Enabled="false" />
</td></tr>

<tr><td class="samplenote">
Read-only text box:
</td><td class="sampleaction">
<com:TTextBox Text="read only" ReadOnly="true" />
</td></tr>

<tr><td class="samplenote">
Auto postback text box not causing validation:
</td><td class="sampleaction">
<com:TTextBox
	Text="change me"
	AutoPostBack="true"
	CausesValidation="false"
	OnTextChanged="textChanged" />
</td></tr>

<tr><td class="samplenote">
Auto postback text box causing validation:
</td><td class="sampleaction">
<com:TTextBox ID="TextBox3"
	Width="300px"
	AutoPostBack="true"
	ValidationGroup="Group1"
	Text="change me to 'test' and see" />
<com:TRequiredFieldValidator
	ControlToValidate="TextBox3"
	ErrorMessage="You must enter a value not equal to 'test'."
	InitialValue="test"
	ValidationGroup="Group1" />
</td></tr>

<tr><td class="samplenote">
Text box's behavior upon postback:
</td><td class="sampleaction">
<com:TTextBox ID="TextBox1" Text="text" />
<com:TButton
	Text="Submit"
	OnClick="submitText" />
</td></tr>

<tr><td class="samplenote">
Safety feature (cross-site scripting prevention):
</td><td class="sampleaction">
<com:TTextBox
	ID="TextBox2"
	AutoPostBack="true"
	Text="<a href=javascript:xxx>test</a>"
	Width="200px"/>
<b>SafeText:</b>
<com:TLabel ID="Output"
	BackColor="silver"
	Text=<%#$this->TextBox2->SafeText%> />
</td></tr>

</table>

<h2>Password Text Boxes</h2>

<table class="sampletable">

<tr><td class="samplenote">
Password with default setting
</td>
<td class="sampleaction">
<com:TTextBox TextMode="Password" /> <com:TButton ID="PassButton1" Text="submit" />
</td></tr>

<tr><td class="samplenote">
Password with PersistPassword enabled
</td>
<td class="sampleaction">
<com:TTextBox ID="Password2" TextMode="Password" PersistPassword="true" /> 
<com:TButton ID="PassButton2" Text="submit" />
</td></tr>
</table>


<h2>MultiLine Text Boxes</h2>

<table class="sampletable">

<tr><td class="samplenote">
Text box with default settings:
</td><td class="sampleaction">
<com:TTextBox TextMode="MultiLine" />
</td></tr>

<tr><td class="samplenote">
Text box with customized dimensions, font and content:
</td><td class="sampleaction">
<com:TTextBox TextMode="MultiLine" Rows="6" Columns="60" Font.Italic="true">
  <prop:Text>
This is a multiline text box.
In HTML, it is displayed as a textarea.
  </prop:Text>
</com:TTextBox>
</td></tr>

<tr><td class="samplenote">
Disabled text box:
</td><td class="sampleaction">
<com:TTextBox
	TextMode="MultiLine"
	Text="disabled"
	Enabled="false" />
</td></tr>

<tr><td class="samplenote">
Read-only text box with text-wrapping disabled:
</td><td class="sampleaction">
<com:TTextBox
	TextMode="MultiLine"
	Text="This is a read-only text box with text-wrapping disabled."
	ReadOnly="true"
	Wrap="false"/>
</td></tr>

<tr><td class="samplenote">
Auto postback text box not causing validation:
</td><td class="sampleaction">
<com:TTextBox
	TextMode="MultiLine"
	Text="change me"
	AutoPostBack="true"
	CausesValidation="false"
	OnTextChanged="textChanged" />
</td></tr>

<tr><td class="samplenote">
Auto postback text box causing validation:
</td><td class="sampleaction">
<com:TTextBox ID="MultiTextBox3"
	TextMode="MultiLine"
	AutoPostBack="true"
	ValidationGroup="Group2"
	Text="change me to 'demo' and see" />
<com:TRequiredFieldValidator
	ControlToValidate="MultiTextBox3"
	ErrorMessage="You must enter a value not equal to 'demo'."
	InitialValue="demo"
	ValidationGroup="Group2" />
</td></tr>

</table>

<h2>Html5 new input types</h2>

<table class="sampletable">

<tr><td class="samplenote">
Color picker textbox
</td>
<td class="sampleaction">
<com:TTextBox TextMode="Color" Text="#FF0000" />
</td></tr>

<tr><td class="samplenote">
Date picker textbox
</td>
<td class="sampleaction">
<com:TTextBox TextMode="Date" />
</td></tr>

<tr><td class="samplenote">
Date, time and timezone picker textbox
</td>
<td class="sampleaction">
<com:TTextBox TextMode="Datetime" />
</td></tr>

<tr><td class="samplenote">
Local date and time picker textbox
</td>
<td class="sampleaction">
<com:TTextBox TextMode="DatetimeLocal" />
</td></tr>

<tr><td class="samplenote">
Email validation textbox
</td>
<td class="sampleaction">
<com:TTextBox TextMode="Email" />
</td></tr>

<tr><td class="samplenote">
Month / year picker textbox
</td>
<td class="sampleaction">
<com:TTextBox TextMode="Month" />
</td></tr>

<tr><td class="samplenote">
Textbox optimized to input a number, usually with a spinner
</td>
<td class="sampleaction">
<com:TTextBox TextMode="Number" Text="15" />
</td></tr>

<tr><td class="samplenote">
Textbox optimized to input a number, with properties min = 10, max = 20, step = 2
</td>
<td class="sampleaction">
<com:TTextBox TextMode="Number" Text="15" Attributes.min="10" Attributes.max="20" Attributes.step="2" />
</td></tr>

<tr><td class="samplenote">
Textbox optimized to input a value inside a range, usually with a slider
</td>
<td class="sampleaction">
<com:TTextBox TextMode="Range" Attributes.min="0" Attributes.max="100"/>
</td></tr>

<tr><td class="samplenote">
Textbox optimized to input a search term
</td>
<td class="sampleaction">
<com:TTextBox TextMode="Search" />
</td></tr>

<tr><td class="samplenote">
Textbox optimized to input a telephone number
</td>
<td class="sampleaction">
<com:TTextBox TextMode="Tel" />
</td></tr>

<tr><td class="samplenote">
Time picker textbox
</td>
<td class="sampleaction">
<com:TTextBox TextMode="Time" />
</td></tr>

<tr><td class="samplenote">
Textbox optimized to input an URL address
</td>
<td class="sampleaction">
<com:TTextBox TextMode="Url" />
</td></tr>

<tr><td class="samplenote">
Week / year picker textbox
</td>
<td class="sampleaction">
<com:TTextBox TextMode="Week" />
</td></tr>

</table>
</com:TContent>
Template file:	Home.page
Class file:	Home.php