Simple Form Example?

[Richard]

Perhaps my Google skills are failing me, but is there an example of best practices control use inside a form? Preferably with TagHelpers. I understand that I can do whatever I want with it; but a simple starting point would be nice.

I guess what I'm asking is: For a decent looking form with built in styling, how should I structure my form and what classes should I be adding to elements? There is no <kendo-textbox /> for example, if there was one, what would it output.

[Neli]

Hello Richard,

I would suggest you to take a look of the following Styling Demo where a sample form is created. The demo refers to ASP.Net MVC, but the code would be the same in ASP.Net Core projects. In the sample the elements are ordered, by using <li> elements. Each widget is placed in an item of the unordered list. 
You could use this approach or you could style the elements in columns for example, by using css. 

In the Forms Demo, you could find a sample output of '@Html.Kendo().TextBox()'. There is no 'kendo-textbox' tag helper, but you could take a look of the MaskedTextBox or NumericTextBox tag helpers.

Below you will find a sample form with tag-helpers created by using the approach from the styling Demo linked above:

<div>
    <ul class="fieldlist">
        <li>
            <kendo-datepicker name="monthpicker"
                              start="CalendarView.Year"
                              depth="CalendarView.Year"
                              format="MMMM yyyy"
                              value='DateTime.Parse("November 2011")'
                              style="width: 100%;"></kendo-datepicker>
        </li>
        <li>
            <kendo-numerictextbox name="custom"
                                  format="#.00 kg"
                                  value="2"></kendo-numerictextbox>
        </li>
        <li>
            <kendo-button name="Default"
                          class="k-primary">
                Default
            </kendo-button>
            <kendo-button name="Primary"
                          class="k-primary">
                Primary
            </kendo-button>
        </li>
    </ul>
</div>

<style>
    .k-widget {
        width: 100%;
    }

    .fieldlist {
        margin: 0 0 -2em;
        padding: 0;
    }

    .fieldlist li {
        list-style: none;
        padding-bottom: 2em;
    }

    .fieldlist label {
        display: block;
        padding-bottom: 1em;
        font-weight: bold;
        text-transform: uppercase;
    }
</style>

Regards,
Neli
Progress Telerik