We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 4095
    • 372 Posts
    Has anyone got an XHTML version of the weblogin (sidebar) form before I reisde myself to attempting to edit to in the next few weeks?

    I’m starting to think I’m out numbered when it comes to validating against XHTML smiley
      [img]http://www.emanz.ac.nz/assets/images/logo/emanz-icon_16x16.gif[/img] Emergency Management Academy of New Zealand [br] http://www.emanz.ac.nz[br][br]MODx Sandbox Login: sandbox Password: castle [br]
      Admin Sandbox Login: sandbox Password: castle
      • 1764
      • 680 Posts
      Personally, I’m a huge fan of XHTML, CSS and standards in general. So if you ever need "standars advocate" you know where I am. grin
        • 6726
        • 7,075 Posts
        I know this is somewhat of an old subject, but I agree with briggsys here, if no one has done it yet I might very well end up doing it myself...

        I think this could be a goal worth pursuing, making this kind of template elements XHTML compliant, then maybe go as far as make it WAI/508 compliant smiley I’ll try to make an inventory of those items needing some improvement in that area...
          .: COO - Commerce Guys - Community Driven Innovation :.


          MODx est l'outil id
        • I am a web-standards XHTML/CSS proponent ... I don’t build sites any other way!

          And now that you mention it, I don’t think I did the sidebar, just the main webloging form, for the demo site content.

          Go for it!
            Ryan Thrash, MODX Co-Founder
            Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
            • 33453
            • 141 Posts
            This is a fairly old topic so I assume that those interested have found their own solution.

            However, since noone else has posted anything, here is my effort:-

            <!-- #declare:separator <hr/> --> 
            <!-- login form section-->
            <div id="loginfrm">
              <fieldset>
                <legend>Login</legend>
                  <form method="post" name="loginfrm" action="[+action+]">
                    <input class="hidden" id="rememberme" name="rememberme" type="hidden" value="[+rememberme+]"/>
                    <label for="username">Username:</label>
                    <input class="text" id="username" name="username" type="text"tabindex="1" onkeypress="return webLoginEnter(document.loginfrm.password);" size="10" value="[+username+]"/>
            
                    <label for="password">Password:</label>
                    <input class="text" id="password" name="password" type="password" tabindex="2" onkeypress="return webLoginEnter(document.loginfrm.cmdweblogin);" size="6" value="" />
            
                     <label class="wide" for="chkbox">Remember me:</label>
                     <input class="checkbox" id="chkbox" name="chkbox" type="checkbox" tabindex="4" size="1" value="" [+checkbox+] onclick="webLoginCheckRemember()"/>
            
                     <input class="submit" id="cmdweblogin" name="cmdweblogin" type="submit" value="[+logintext+]"/>
            
                  <p><a href="#" onclick="webLoginShowForm(2);return false;">Forgot Your Password?</a></p>
                </form>
              </fieldset>
            </div> <!-- loginfrm -->
            <hr/>
            <!-- log out hyperlink section -->
            <a href='[+action+]'>[+logouttext+]</a>
            <hr/>
            <!-- Password reminder form section -->
            <div id="loginreminder">
              <fieldset>
                <legend>Password Reminder</legend>
                  <form name="loginreminder" method="post" action="[+action+]">
                    <input class="hidden" type="hidden" name="txtpwdrem" value="0" />
            
                    <label for="txtwebemail">Email</label>
                    <input class="text" id="txtwebemail" name="txtwebemail" type="text" size="30" />
            
                    <input class="submit" type="submit" value="Submit" name="cmdweblogin"/>
                    <input class="submit" type="reset" value="Cancel" name="cmdcancel" onclick="webLoginShowForm(1);"/>
              <p>Enter your registered email address to receive your password</p>
                </form>
              </fieldset>
            </div> <!-- loginreminder-->
            


            I have then assigned styles to the various components to suit.
              • 21612
              • 1 Posts
              ZenMaster, thanks for your post. Do you mind sharing your CSS snippet as well?
                • 33453
                • 141 Posts
                nitsurfer,

                The CSS I currently have is as follows but will probably change
                /* -------------------------------------------------------------- */
                /* Forms */
                
                label,input,select
                {
                  display: block;
                  margin-bottom: 10px;
                }
                
                /* Firefox needs this - IE doesn't */
                html>body input,select
                {
                  float:left;
                }
                
                label
                {
                  float:left;
                  text-align: right;
                  margin-right:4px;
                }
                
                /* -------------------------------------------------------------- */
                /* Login Form */
                
                #loginfrm
                {
                  width:180px;
                }
                
                #loginfrm legend
                {
                  font-weight:bold;
                  margin-bottom:5px;
                }
                
                #loginfrm label
                {
                  width:70px;
                }
                
                #loginfrm label.wide
                {
                  width:110px;
                  cursor:pointer;
                }
                
                #loginfrm .text
                {
                  width:85px;
                  background:#c8c8c8;
                }
                
                #loginfrm .hidden
                {
                  width:0px;
                }
                
                #loginfrm .checkbox
                {
                  width:10px;
                  margin-top:3px;
                }
                
                #loginfrm .submit
                {
                  width:50%;
                  margin: 5px 25%;
                }
                
                #loginfrm p
                {
                  clear:left;
                  margin-left:15px;
                }
                
                #loginfrm a
                {
                  text-decoration:none;
                }
                


                The form specific delarations are repeated as necessary for #loginreminder.

                I have also noticed an error in the code in my original post - the <fieldset><legend></legend></fieldset> tags should be INSIDE the <form></form> tags.