Form

Artikel
07/13/2023

Formulir adalah sekelompok kontrol yang mengumpulkan dan mengirimkan data dari pengguna. Formulir biasanya digunakan untuk halaman pengaturan, survei, pembuatan akun, dan banyak lagi.

Artikel ini membahas panduan desain untuk membuat tata letak XAML untuk formulir.

Contoh formulir

Kapan Anda harus menggunakan formulir?

Formulir adalah halaman khusus untuk mengumpulkan input data yang jelas terkait satu sama lain. Anda harus menggunakan formulir saat Anda perlu mengumpulkan data secara eksplisit dari pengguna. Anda dapat membuat formulir untuk pengguna untuk:

Masuk ke akun
Mendaftar untuk akun
Mengubah pengaturan aplikasi, seperti opsi privasi atau tampilan
Ikuti survei
Membeli item
Berikan umpan balik

Jenis formulir

Saat memikirkan bagaimana input pengguna dikirimkan dan ditampilkan, ada dua jenis formulir:

1. Langsung memperbarui

Halaman Pengaturan

Gunakan formulir pembaruan instan saat Anda ingin pengguna segera melihat hasil mengubah nilai dalam formulir. Misalnya, di halaman pengaturan, pilihan saat ini ditampilkan, dan perubahan apa pun yang dilakukan pada pilihan segera diterapkan. Untuk mengakui perubahan di aplikasi, Anda harus menambahkan penanganan aktivitas ke setiap kontrol input. Jika pengguna mengubah kontrol input, aplikasi Anda dapat merespons dengan tepat.

2. Mengirimkan dengan tombol

Jenis formulir lainnya memungkinkan pengguna untuk memilih kapan harus mengirimkan data dengan satu klik tombol.

Jenis formulir ini memberi pengguna fleksibilitas dalam merespons. Biasanya, jenis formulir ini berisi bidang input formulir yang lebih bebas, dan dengan demikian menerima berbagai respons yang lebih besar. Untuk memastikan input pengguna yang valid dan data yang diformat dengan benar setelah pengiriman, pertimbangkan rekomendasi berikut:

Jadikan tidak mungkin untuk mengirimkan informasi yang tidak valid dengan menggunakan kontrol yang benar (yaitu, gunakan CalendarDatePicker daripada TextBox untuk tanggal kalender). Lihat selengkapnya tentang memilih kontrol input yang sesuai dalam formulir Anda di bagian Kontrol Input nanti.
Saat menggunakan kontrol TextBox, berikan petunjuk format input yang diinginkan kepada pengguna dengan properti PlaceholderText .
Berikan keyboard pada layar yang sesuai kepada pengguna dengan menyatakan input kontrol yang diharapkan dengan properti InputScope .
Tandai input yang diperlukan dengan tanda bintang * pada label.
Nonaktifkan tombol kirim hingga semua informasi yang diperlukan terisi.
Jika ada data yang tidak valid saat pengiriman, tandai kontrol dengan input yang tidak valid dengan bidang atau batas yang disorot, dan mengharuskan pengguna mengirim ulang formulir.
Untuk kesalahan lain, seperti koneksi jaringan yang gagal, pastikan untuk menampilkan pesan kesalahan yang sesuai kepada pengguna.

Layout

Untuk memfasilitasi pengalaman pengguna dan memastikan bahwa pengguna dapat memasukkan input yang benar, pertimbangkan rekomendasi berikut untuk merancang tata letak untuk formulir.

Label

Label harus diratakan kiri dan ditempatkan di atas kontrol input. Banyak kontrol memiliki properti Header bawaan untuk menampilkan label. Untuk kontrol yang tidak memiliki properti Header, atau untuk memberi label grup kontrol, Anda bisa menggunakan TextBlock sebagai gantinya.

Untuk merancang aksesibilitas, beri label semua individu dan grup kontrol untuk kejelasan bagi pembaca manusia dan layar.

Untuk gaya font, gunakan ramp jenis Windows default. Gunakan TitleTextBlockStyle untuk judul halaman, SubtitleTextBlockStyle untuk judul grup, dan BodyTextBlockStyle untuk label kontrol.

Lakukan	Jangan

Jarak

Untuk memisahkan grup kontrol secara visual satu sama lain, gunakan perataan, margin, dan padding. Kontrol input individu berukuran tinggi 80px dan harus terpisah jarak 24px. Grup kontrol input harus terpisah spasi 48px.

grup formulir

Kolom

Membuat kolom dapat mengurangi ruang putih yang tidak perlu dalam formulir, terutama dengan ukuran layar yang lebih besar. Namun, jika Anda ingin membuat formulir multi-kolom, jumlah kolom harus bergantung pada jumlah kontrol input pada halaman dan ukuran layar jendela aplikasi. Daripada membanjiri layar dengan banyak kontrol input, pertimbangkan untuk membuat beberapa halaman untuk formulir Anda.

Lakukan	Jangan

Tata letak responsif

Formulir harus diubah ukurannya saat ukuran layar atau jendela berubah, sehingga pengguna tidak mengabaikan bidang input apa pun. Untuk informasi selengkapnya, lihat teknik desain responsif. Misalnya, Anda mungkin ingin menjaga wilayah tertentu dari formulir selalu terlihat, apa pun ukuran layarnya.

fokus formulir

Perhentian tab

Pengguna dapat menggunakan keyboard untuk menavigasi kontrol dengan pemberhentian tab. Secara default, urutan tab kontrol mencerminkan urutan pembuatannya di XAML. Untuk mengambil alih perilaku default, ubah properti IsTabStop atau TabIndex kontrol.

fokus tab pada kontrol dalam formulir

Kontrol input

Kontrol input adalah elemen UI yang memungkinkan pengguna memasukkan informasi ke dalam formulir. Beberapa kontrol umum yang dapat ditambahkan ke formulir tercantum di bawah ini, serta informasi tentang kapan harus menggunakannya.

Masukan teks

Kontrol	Gunakan	Contoh
TextBox	Mengambil satu atau beberapa baris teks	Nama, respons formulir gratis, atau umpan balik
PasswordBox	Mengumpulkan data privat dengan menyembunyikan karakter	Kata sandi, Nomor Jaminan Sosial (SSN), VPN, informasi kartu kredit
Kotak AutoSuggest	Memperlihatkan daftar saran kepada pengguna dari sekumpulan data terkait saat mereka mengetik	Pencarian database, email ke: baris, kueri sebelumnya
RichEditBox	Mengedit file teks dengan teks, hyperlink, dan gambar yang diformat	Mengunggah file, mempratinjau, dan mengedit di aplikasi

Pilihan

Kontrol	Gunakan	Contoh
KotakCentang	Memilih atau membatalkan pilihan satu atau beberapa item tindakan	Setujui syarat dan ketentuan, tambahkan item opsional, pilih semua yang berlaku
RadioButton	Pilih satu opsi dari dua pilihan atau lebih	Pilih jenis, metode pengiriman, dll.
AlihkanSwitch	Pilih salah satu dari dua opsi yang saling eksklusif	Aktif/nonaktif

Catatan: Jika ada lima item pilihan atau lebih, gunakan kontrol daftar.

Daftar

Kontrol	Gunakan	Contoh
ComboBox	Mulai dalam keadaan ringkas dan perluas untuk menampilkan daftar item yang dapat dipilih	Pilih dari daftar panjang item, seperti negara bagian atau negara
ListView	Kategorikan item dan tetapkan header grup, seret dan letakkan item, kurasi konten, dan urutkan ulang item	Opsi peringkat
GridView	Menyusun dan menelusuri koleksi berbasis gambar	Pilih foto, warna, tampilkan tema

Input numerik

Kontrol	Gunakan	Contoh
Slider	Pilih angka dari rentang nilai numerik yang bersebelahan	Persentase, volume, kecepatan pemutaran
Peringkat	Nilai dengan bintang	Umpan balik pelanggan

Tanggal dan Waktu

Kontrol	Penggunaan
Tampilan Kalender	Pilih satu tanggal atau rentang tanggal dari kalender yang selalu terlihat
CalendarDatePicker	Memilih satu tanggal dari kalender kontekstual
DatePicker	Pilih satu tanggal yang dilokalkan saat info kontekstual tidak penting
Timepicker	Pilih satu nilai waktu

Kontrol Tambahan

Untuk daftar lengkap kontrol UWP, lihat indeks kontrol menurut fungsi.

Untuk kontrol UI yang lebih kompleks dan kustom, lihat sumber daya yang tersedia dari perusahaan seperti Telerik, SyncFusion, DevExpress, Infragistics, ComponentOne, dan ActiPro.

Contoh formulir satu kolom

Contoh ini menggunakan tampilan daftar akrilik/daftar detail dan kontrol NavigationView . Cuplikan layar contoh formulir lain

<StackPanel>
    <TextBlock Text="New Customer" Style="{StaticResource TitleTextBlockStyle}"/>
    <Button Height="100" Width="100" Background="LightGray" Content="Add photo" Margin="0,24" Click="AddPhotoButton_Click"/>
    <TextBox x:Name="Name" Header= "Name" Margin="0,24,0,0" MaxLength="32" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
    <TextBox x:Name="PhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="15" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
    <TextBox x:Name="Email" Header="Email" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <RelativePanel>
        <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" MaxLength="50" Width="200" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
        <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0"  Width="100" RelativePanel.RightOf="City">
             <x:String>WA</x:String>
        </ComboBox>
    </RelativePanel>
    <TextBox x:Name="ZipCode" PlaceholderText="Zip Code" Margin="0,24,0,0" MaxLength="6" Width="100" HorizontalAlignment="Left" InputScope="Number" />
    <StackPanel Orientation="Horizontal">
        <Button Content="Save" Margin="0,24" Click="SaveButton_Click"/>
        <Button Content="Cancel" Margin="24" Click="CancelButton_Click"/>
    </StackPanel>  
</StackPanel>

Contoh formulir dua kolom

Contoh ini menggunakan kontrol Pivot , latar belakang Akrilik , dan CommandBar selain kontrol input. Cuplikan layar contoh formulir

<Grid>
    <Pivot Background="{ThemeResource SystemControlAccentAcrylicWindowAccentMediumHighBrush}" >
        <Pivot.TitleTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock Text="Company Name" Style="{ThemeResource HeaderTextBlockStyle}"/>
                </Grid>
            </DataTemplate>
        </Pivot.TitleTemplate>
        <PivotItem Header="Orders" Margin="0"/>    
        <PivotItem Header="Customers" Margin="0">
            <!--Form Example-->
            <Grid Background="White">
                <RelativePanel>
                    <StackPanel x:Name="Customer" Margin="20">
                        <TextBox x:Name="CustomerName" Header= "Customer Name" Margin="0,24,0,0" MaxLength="320" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
                        <TextBox x:Name="CustomerPhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
                        <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="AlphanumericFullWidth" />
                        <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="AlphanumericFullWidth" />
                        <RelativePanel>
                            <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" MaxLength="50" Width="200" HorizontalAlignment="Left" InputScope="Text" />
                            <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0"  Width="100" RelativePanel.RightOf="City">
                                <x:String>WA</x:String>
                            </ComboBox>
                        </RelativePanel>
                        <TextBox x:Name="ZipCode" PlaceholderText="Zip Code" Margin="0,24,0,0" MaxLength="6" Width="100" HorizontalAlignment="Left" InputScope="Number" />
                    </StackPanel>
                    <StackPanel x:Name="Associate" Margin="20" RelativePanel.RightOf="Customer">
                        <TextBox x:Name="AssociateName" Header= "Associate" Margin="0,24,0,0" MaxLength="320" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
                        <TextBox x:Name="AssociatePhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
                        <DatePicker x:Name="TargetInstallDate" Header="Target install Date" HorizontalAlignment="Left" Margin="0,24,0,0"></DatePicker>
                        <TimePicker x:Name="InstallTime" Header="Install Time" HorizontalAlignment="Left" Margin="0,24,0,0"></TimePicker>
                    </StackPanel>
                </RelativePanel>
            </Grid>
        </PivotItem>
        <PivotItem Header="Invoices"/>
        <PivotItem Header="Stock"/>
        <Pivot.RightHeader>
            <CommandBar OverflowButtonVisibility="Collapsed" Background="Transparent">
                <AppBarButton Icon="Add"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Edit" />
                <AppBarButton Icon="Delete"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Save"/>
            </CommandBar>
        </Pivot.RightHeader>
    </Pivot>
</Grid>

Sampel Database Pesanan Pelanggan

cuplikan layar database pesanan pelanggan Untuk mempelajari cara menyambungkan input formulir ke database Azure dan melihat formulir yang diimplementasikan sepenuhnya, lihat sampel aplikasi Database Pesanan Pelanggan .

Form

Kapan Anda harus menggunakan formulir?