X
dnn.blog.
Back

DNN 6 Form Pattern - Html Conventions

I am now in the situation to convert the DNN FAQs module to DNN 6. The first thing to do is to implement the new form pattern from DNN 6. I looked around in the internet to find some resources which help with that and found a video from Ian Robertson in the DNN Wiki and some blog posts but no document where everything is documented together . So I decided to put that information together in a blog post

Module wrapper

The content of your module has to be wrapped by the “dnnForm” CSS class. All the styles for dnnForm are defined in default.css

<div class="dnnForm">
   <!-- form content goes inside -->
</div>

for overwriting some of the styles in module.css define a module specific class

<div class="dnnForm dnnMyModule">
   <!-- form content goes inside -->
</div>

Admin Tab Navigation

The Navigation Tabs (used mostly in the settings area) are written as a simple ordered list:

<ul class="dnnAdminTabNav">
   <li><a href="#ssBasicSettings">Basic Settings</a>
   <li><a href="#ssAdvancedSettings">Advanced Settings</a></li>
</ul>

<div id="ssBasicSettings">
   <!-- Content goes here-->
</div>
<div id="ssAdvancedSettings">
<!-- Content goes here-->
</div>

Collapsible Panels

 Collapsible panels

If there are 3 or more groups of content, first panel should be expanded and the rest should be collapsed.

<h2 class="dnnFormSectionHead">
   <a class="dnnSectionExpanded">Site Details</a>
</h2>
<fieldset>
   <!--Content goes here-->
</fieldset>

Form Items

Form Item

A typical form item is build of two or more components: Label, Input, Validation

<div class="dnnFormItem">
   <dnn:label />
   <asp:textbox class="dnnFormRequired" />
   <asp:requiredfieldvalidator cssclass="dnnFormMessage dnnFormError" />
</div>

Messages

Messages follow a simple scheme:

Info

formpattern-infomessage

<div class="dnnFormMessage dnnFormInfo">
   Your message
</div>

Success

formpattern-successmessage

<div class="dnnFormMessage dnnFormSuccess">
   Your message
</div>

Warning

formpattern-warningmessage

<div class="dnnFormMessage dnnFormWarning">
   Your message
</div>

Error

formpattern-errormessage

<div class="dnnFormMessage dnnFormError">
   Your message
</div>

Buttons

formpattern-action

Define your actions as Hyperlinks or LinkButtons in an ul-list of class “dnnActions”.

<ul class="dnnActions">
   <li><asp:linkbutton id="cmdUpdate" cssclass="dnnPrimaryAction" runat="server"></asp:linkbutton></li> 
   <li><asp:linkbutton id="cmdCancel" cssclass="dnnSecondaryAction" runat="server"></asp:linkbutton></li>
</ul>

Update:

There is a very good new DNN UX Guide online. See this link: http://uxguide.dnngallery.com


Back
Total: 19 Comment(s)
Ries Spruit
Hey there, very usefull info! I am pulling my hair out, trying to create a nice validating wizard form in DNN6.

Have you perhaps figured out how to use validationGroups with dnnTabs?

I am using jquery validation now, but I can't get this to work right in IE. I suppose asp.net validation would be the better point, but I am afraid all the postbacks will drive me crazy too.. Although I suppose the form paradigm should take care of that.

Best regards,
Ries
Thursday, February 16, 2012 · reply ·
Vincent Smith
App Cloner is an application that will allow you to make exact copies of any app on your smartphone or tablet.
Saturday, August 4, 2018 · reply ·
Vincent Smith
App Cloner is an application that will allow you to make exact copies of any app on your smartphone or tablet. https://appcloner.xyz/
Saturday, August 4, 2018 · reply ·
rajan
This is the best solution of Bluetooth connection check it https://fixconnectionsbluetoothaudiodeviceswirelessdisplayswindows10.net/
Monday, August 20, 2018 · reply ·
Martin M. Lopez
Amazing Place! What a pleasure to visited that place. In this place we feel better, rationally alleviation and discharge every one of the strain. I proposed the general population to visit https://www.essaysontime.com.au in this place for seeing the shade of nature. Much appreciated
Monday, September 17, 2018 · reply ·
https://hosting-reviews.co.uk/
Such a nice post and thanks to share it with us
Tuesday, April 9, 2019 · reply ·
Nice post
Tuesday, April 9, 2019 · reply ·
monica
programming is not essay you can not take it lite. not every one can able to learn this most of the people are software engineer but they are not getting the programming. i face this issue when i develop a www.6dollarsessay.com serious it's so many issue that i faced during this development.
Wednesday, September 4, 2019 · reply ·
Lucille F. Parham
I am Very thank full the owner of this blog. Because of this blog is very informative for me. https://kingdomrush.io/
Saturday, January 11, 2020 · reply ·
kissanime
This is a wonderful article. You have given so much info in it. These type of articles keeps the user’s interest in the website, and keep on sharing more.
Thursday, January 23, 2020 · reply ·
Techpout
I am deeply attracted by your post. It is really a nice and informative one. I will recommend it to my friends. Also, you can read this: https://www.techpout.com/best-kissanime-alternatives/
Thursday, January 23, 2020 · reply ·
Ask2Human
https://ask2human.com/">Customer Care Number
https://ask2human.com/">Ask2human
https://ask2human.com/listing/airtel-customer-care-number">Airtel Customer Care Number
https://ask2human.com/listing/bharat-gas-customer-care-number/">Bharat Gas Customer Care Number
https://ask2human.com/listing/hdfc-bank-customer-care-number/">HDFC Bank Customer Care Number
https://ask2human.com/listing/apple-customer-care-number/">Apple Customer Care Number
https://ask2human.com/listing/bata-customer-care-number/">Bata Customer Care Number
https://ask2human.com/listing/amazon-customer-care-number/">Amazon Customer Care Number
https://ask2human.com/listing/bookmyshow-customer-care-number/">BookMyShow Customer Care Number
https://ask2human.com/listing/caratlane-customer-care-number/">CaratLane Customer Care Number
https://ask2human.com/listing/chai-point-customer-care-number/">Chai Point Customer Care Number
https://ask2human.com/listing/cleartrip-customer-care-number/">Cleartrip Customer Care Number
https://ask2human.com/listing/croma-customer-care-number/">Croma Customer Care Number
https://ask2human.com/listing/expedia-customer-care-number/">Expedia Customer Care Number
https://ask2human.com/listing/ebay-customer-care-number/">Ebay Customer Care Number
https://ask2human.com/listing/firstcry-customer-care-number/">FirstCry Customer Care Number
https://ask2human.com/listing/flipkart-customer-care-number/">Flipkart Customer Care Number
https://ask2human.com/listing/goair-customer-care-number/">GoAir Customer Care Number
https://ask2human.com/listing/godaddy-customer-care-number/">GoDaddy Customer Care Number
https://ask2human.com/listing/goibibo-customer-care-number/">Goibibo Customer Care Number
https://ask2human.com/listing/goindigo-customer-care-number/">GoIndiGo Customer Care Number
https://ask2human.com/listing/grofers-customer-care-number/">Grofers Customer Care Number
https://ask2human.com/listing/homeshop18-customer-care-number/">HomeShop18 Customer Care Number
https://ask2human.com/listing/hotels-com-customer-care-number/">Hotels.com Customer Care Number
https://ask2human.com/listing/irctc-customer-care-number/">IRCTC Customer Care Number
https://ask2human.com/listing/ixigo-customer-care-number/">Ixigo Customer Care Number
https://ask2human.com/listing/jabong-customer-care-number/">Jabong Customer Care Number
https://ask2human.com/listing/jet-airways-customer-care-number/">Jet Airways Customer Care Number
https://ask2human.com/listing/koovs-customer-care-number/">Koovs Customer Care Number
https://ask2human.com/listing/lenskart-customer-care-number/">Lenskart Customer Care Number
https://ask2human.com/listing/limeroad-customer-care-number/">Limeroad Customer Care Number
https://ask2human.com/listing/makemytrip-customer-care-number/">MakeMyTrip Customer Care Number
https://ask2human.com/listing/myntra-customer-care-number/">Myntra Customer Care Number
https://ask2human.com/listing/naaptol-customer-care-number/">Naaptol Customer Care Number
https://ask2human.com/listing/nykaa-customer-care-number/">Nykaa Customer Care Number
https://ask2human.com/listing/ola-cabs-customer-care-number/">Ola Cabs Customer Care Number
https://ask2human.com/listing/pantaloons-customer-care-number/">Pantaloons Customer Care Number
https://ask2human.com/listing/paytm-customer-care-number/">PayTM Customer Care Number
https://ask2human.com/listing/nearbuy-customer-care-number/">NearBuy Customer Care Number
https://ask2human.com/listing/pepperfry-customer-care-number/">Pepperfry Customer Care Number
https://ask2human.com/listing/portea-medical-customer-care-number/">Portea Medical Customer Care Number
https://ask2human.com/listing/pvr-cinemas-customer-care-number/">PVR Cinemas Customer Care Number
https://ask2human.com/listing/quikr-customer-care-number/">Quikr Customer Care Number
https://ask2human.com/listing/redbus-customer-care-number/">Redbus Customer Care Number
https://ask2human.com/listing/shopclues-customer-care-number/">ShopClues Customer Care Number
https://ask2human.com/listing/shoppers-stop-customer-care-number/">Shoppers Stop Customer Care Number
https://ask2human.com/listing/rediff-customer-care-number/">Rediff Customer Care Number
https://ask2human.com/listing/snapdeal-customer-care-number/">Snapdeal Customer Care Number
https://ask2human.com/listing/xfinity-customer-care-number/">Xfinity Customer Care Number
https://ask2human.com/listing/usha-customer-care-number/">Usha Customer Care Number
https://ask2human.com/listing/oyo-rooms-customer-care-number/">Oyo Rooms Customer Care Number
https://ask2human.com/listing/zomato-customer-care-number/">Zomato Customer Care Number
https://ask2human.com/listing/spicejet-customer-care-number/">SpiceJet Customer Care Number
https://ask2human.com/listing/swiggy-customer-care-number/">Swiggy Customer Care Number
https://ask2human.com/listing/travelguru-customer-care-number/">Travelguru Customer Care Number
https://ask2human.com/listing/tripadvisor-customer-care-number/">TripAdvisor Customer Care Number
https://ask2human.com/listing/spectrum-customer-care-number/">Spectrum Customer Care Number
https://ask2human.com/listing/aakash-institute-customer-care-number/">Aakash Institute Customer Care Number
https://ask2human.com/listing/acc-limited-customer-care-number/">ACC Limited Customer Care Number
https://ask2human.com/listing/aol-customer-care-number/">Aol Customer Care Number
https://ask2human.com/listing/accu-chek-customer-care-number/">Accu-Chek Customer Care Number
https://ask2human.com/listing/urbanclap-customer-care-number/">UrbanClap Customer Care Number
https://ask2human.com/listing/acer-customer-care-number/">Acer Customer Care Number
https://ask2human.com/listing/intex-customer-care-number/">Intex Customer Care Number
https://ask2human.com/listing/bigbasket-customer-care-number/">BigBasket Customer Care Number
https://ask2human.com/listing/walmart-customer-care-number/">Walmart Customer Care Number
https://ask2human.com/listing/bharat-gas-customer-care-number/">Bharat Gas Customer Care Number
https://ask2human.com/listing/delhi-metro-rail-customer-care-number/">Delhi Metro Rail Customer Care Number
https://ask2human.com/listing/vijay-sales-customer-care-number/">Vijay Sales Customer Care Number
https://ask2human.com/listing/voltas-customer-care-number/">Voltas Customer Care Number
https://ask2human.com/listing/lg-customer-care-number/">LG Customer Care Number
https://ask2human.com/listing/rapido-bike-customer-care-number/">Rapido Bike Customer Care Number
https://ask2human.com/listing/jio-customer-care-number/">Jio Customer Care Number
https://ask2human.com/listing/yatra-customer-care-number/">Yatra Customer Care Number
https://ask2human.com/listing/verizon-customer-care-number/">Verizon Customer Care Number
Tuesday, February 11, 2020 · reply ·
sims mobile guide
HomeHack CheatsThe Sims Mobile Cheats: Best Legit Hacks to Win Simcash & Simoleons for Free
Tuesday, February 25, 2020 · reply ·
Lorraine J. Dupree
Kris Thorkelson, who began his career in the pharmaceutical industry in Winnipeg, Manitoba, operates several pharmacies, in addition to his real estate business. “As a leader, it is your role to praise employees who do a good job,” Thorkelson adds. http://www.youngupstarts.com/2018/09/11/interview-kris-thorkelson-entrepreneur-and-business-leader/
Thursday, February 27, 2020 · reply ·
Sophie Miller
Thanks for the useful information! You helped me with advice! https://1921681254.info/192-168-0-1/
Thursday, March 12, 2020 · reply ·
Lily
There are many reasons that might prevent you from signing in email normally, http://www-gmailcom.email/ is created to help you solve all sign in problem.
Tuesday, April 21, 2020 · reply ·
T411 Movies Download Website
Thanks for sharing useful information if you want to get Hollywood movies related information then you can visit on my blog's article - https://www.bollyquick.com/t411-movies-download-website/
Monday, May 18, 2020 · reply ·
Ap Grama Sachivalayam apply online
This is an amazing blog where I have developed my knowledge if you want to get Indian govt scheme then you can visit on my website's article - https://www.websitesihizmeti.com/ap-grama-sachivalayam-apply-online/
Monday, May 18, 2020 · reply ·
Sophie Miller
https://10-0-0-0-1.online/ Thank you for your work on the blog! You're doing a good job!
Saturday, June 27, 2020 · reply ·

about.me.

Torsten WeggenMy name is Torsten Weggen and I am CEO of indisoftware GmbH in Hanover, Germany. I'm into DNN since 2008. Before this, I did a lot of desktop stuff mainly coded with Visual Foxpro (see http://www.auktionsbuddy.de). 

I'm programmer, husband, father + born in 1965.

Please feel free to contact me if you have questions.

Latest Posts

DNN module development with Angular 2+ (Part 7)
6/10/2018 1:43 PM | Torsten Weggen
DNN module development with AngularJS (Part 6)
12/16/2016 7:00 AM | Torsten Weggen
DNN module development with AngularJS (Part 5)
12/16/2016 6:00 AM | Torsten Weggen
DNN module development with AngularJS (Part 4)
12/16/2016 5:00 AM | Torsten Weggen
DNN module development with AngularJS (Part 3)
12/16/2016 4:00 AM | Torsten Weggen
DNN module development with AngularJS (Part 2)
12/16/2016 3:00 AM | Torsten Weggen
DNN module development with AngularJS (Part 1)
12/15/2016 7:19 AM | Torsten Weggen
Blogging in DNN with Markdown Monster by Rick Strahl
11/27/2016 1:14 PM | Torsten Weggen
Creating a global token engine
11/18/2016 10:25 AM | Torsten Weggen
DnnImagehandler - Hot or not ?
2/21/2015 11:52 PM | Torsten Weggen

My Twitter

Keine News gefunden!