HTML & CSS How to improve my account-details form?

[Malcolm]

Hey everyone!

As mentioned in my previous thread, how to improve my login form, I am making prefabs for me to plop into my web projects; this allows me to keep my motivation high while creating website templates quickly and efficiently. You can check out my previous thread by clicking here.

I will use the account-details template prefab on pages where users can edit their account details. All backend functions would come after implementing template prefab. In other words, it won't be working right away. I would still need to set up the backend.

Now I would like some help in seeing what I can do to improve my code, e.g. code formatting, more comments, other solutions etc.

<link href="css/stylesheet.css" rel="stylesheet">
<div class="account-details-Contain">
    <form>
    <!-- Display name/ Public -->
        <label for="displayName">Display Name:</label>
        <input type="text" id="displayName" placeholder="Enter a name which others can refer you by.">

    <!-- User Credentials -->
        <label for="username">Username</label>
        <input type="text" id="username" placeholder="Malcolm">
        <label for="email">Email</label>
        <input type="email" id="email" placeholder="[email protected]" value="[email protected]">
        <label for="cPassword">Current Password</label>
        <input type="password" id="cPassword" value="******">
        <label for="nPassword">New Password</label>
        <input type="password" id="nPassword" placeholder="Enter new password">
        <label for="ncPassword">Confirm Password</label>
        <input type="password" id="ncPassword" placeholder="Confirm new password.">
    <!-- End of User Credentials -->

    <!-- User Roles-->

        <input type="radio" id="Admiin" value="user" placeholder="user"><label for="adminRole">Admin</label>
        <input type="radio" id="userRole" value="user" placeholder="user"><label for="userRole">User</label>

    <!-- End of User Roles-->

    <!-- User DOB -->
        <label for="userDOB">Date of Birth</label>
        <input type="date" id="userDOB">
    <!-- End User DOB-->

    <!-- Form Actions -->
        <input type="button" value="Save" id="account-save" >
        <input type="reset" value="Reset" id="account-field-reset">
    <!-- End Form Actions-->
        <hr>
    <!-- Account Removal -->
        <h3>Danger Zone</h3>
        <label for="userDelete">Delete Account</label>
        <input type="button" value="Delete Account" id="userDelete">
    <!-- End Account Removal -->
    </form>
</div>

GitHub - malcolmjr96/account-details

Contribute to malcolmjr96/account-details development by creating an account on GitHub.

github.com

 

[Mutiny]

Wrap each input/label pair inside of a container div that has the same class. That way, if you need to adjust spacing between items or change the layout later you have more you can work with. Also, I would recommend having multiple fields per row, in either a 2 or 3 column layout, rather than having the user go down a long line of fields.

Also, wrap similar fields inside of a fieldset tag. Having that visual separation of the different parts of the form will be easier for users to follow and the fieldset tag is also used by screen readers to assist blind users in filling out the form.

 

[Malcolm]

Wrap each input/label pair inside of a container div that has the same class. That way, if you need to adjust spacing between items or change the layout later you have more you can work with. Also, I would recommend having multiple fields per row, in either a 2 or 3 column layout, rather than having the user go down a long line of fields.

Also, wrap similar fields inside of a fieldset tag. Having that visual separation of the different parts of the form will be easier for users to follow and the fieldset tag is also used by screen readers to assist blind users in filling out the form.

Thank you once again!

I will modify the code to have each input/label pair nested inside a div container. I will also rearrange the fields to be in a 2-3 column layout, and I might try using flex to help with this. I hope it works!

• For the fieldset, are you able to have multiple fieldsets in one form?
• Is there a particular naming system that is standard use when dealing with multiple div containers, or is using login-name a better practice?

 

[Mutiny]

For the fieldset, yes you can have multiples in one form. Usually you want one fieldset for each related group of fields in the form. So, if I had a form that had some fields for username and password, some fields for first name and last name and some fields for address and phone number, I might have the following fieldsets:

User Credentials - Fieldset would wrap the username and password fields
Your Name - Fieldset would wrap the first and last name fields
Contact Information - Fieldset would wrap the address and phone number.

As far as the class to use for the div that wraps the label/input pairs, there isn't really a convention, it's just something that helps me keep things straight. As long as each of the wrapper divs has the same class it will work fine if you need to target the fields with CSS. Having the container lets you do things like make a three column grid rather than trying to force the label and input fields into a three column grid, which can get messy.

 

[Malcolm]

For the fieldset, yes you can have multiples in one form. Usually you want one fieldset for each related group of fields in the form. So, if I had a form that had some fields for username and password, some fields for first name and last name and some fields for address and phone number, I might have the following fieldsets:

User Credentials - Fieldset would wrap the username and password fields
Your Name - Fieldset would wrap the first and last name fields
Contact Information - Fieldset would wrap the address and phone number.

As far as the class to use for the div that wraps the label/input pairs, there isn't really a convention, it's just something that helps me keep things straight. As long as each of the wrapper divs has the same class it will work fine if you need to target the fields with CSS. Having the container lets you do things like make a three column grid rather than trying to force the label and input fields into a three column grid, which can get messy.

Thank you for this! Very informative, greatly appreciated.

 

[Ghost]

I haven't seen it visually, but the code looks good. Feature wise I would recommend adding a notes function so you can leave notes on accounts. Personally what I do is set up a datatase table like "feature_notes" and then a column would be "item_type" and a column "item_id" which could be "user_accounts" (type) and "1" (user ID 1). Then the column for the note like "note_text" and a column for when the note was created. That way you can reuse the table for *anything* because it's always just a general notes table that can relate to anything... Like forum thread notes would just "forum_thread" item type with the thread ID. It's a nifty way to make sure any feature you build will last for years and work for other features besides the one you are focusing on.

 

[Malcolm]

I haven't seen it visually, but the code looks good. Feature wise I would recommend adding a notes function so you can leave notes on accounts. Personally what I do is set up a datatase table like "feature_notes" and then a column would be "item_type" and a column "item_id" which could be "user_accounts" (type) and "1" (user ID 1). Then the column for the note like "note_text" and a column for when the note was created. That way you can reuse the table for *anything* because it's always just a general notes table that can relate to anything... Like forum thread notes would just "forum_thread" item type with the thread ID. It's a nifty way to make sure any feature you build will last for years and work for other features besides the one you are focusing on.

Thank you for the feedback! I like the way you do that, I'll definitely look into implementing it into my future projects.

 

[simong1993]

Codes good man, only issue i would say is your ID's are all the place lol
One moment you have say "displayName"
Then you have "account-save"
Then you have "userDelete"
Then you have "Admiin"

Later on when you start having lots of code it could cause you issues, you might think well im doing it this way so User-Delete but in fact its userDelete or you may go UserDelete. If you drill into your self a style now it will save you so many bugs later on down the line, Me i would do user_delete. Lower case and easy to read but other then that mate its spot on

 

[Malcolm]

Codes good man, only issue i would say is your ID's are all the place lol
One moment you have say "displayName"
Then you have "account-save"
Then you have "userDelete"
Then you have "Admiin"

Later on when you start having lots of code it could cause you issues, you might think well im doing it this way so User-Delete but in fact its userDelete or you may go UserDelete. If you drill into your self a style now it will save you so many bugs later on down the line, Me i would do user_delete. Lower case and easy to read but other then that mate its spot on

Thanks for the feedback! I will definitely keep that in mind, I'll be working on this later today and post an updated version of the code.

 

[Ghost]

Codes good man, only issue i would say is your ID's are all the place lol
One moment you have say "displayName"
Then you have "account-save"
Then you have "userDelete"
Then you have "Admiin"

Later on when you start having lots of code it could cause you issues, you might think well im doing it this way so User-Delete but in fact its userDelete or you may go UserDelete. If you drill into your self a style now it will save you so many bugs later on down the line, Me i would do user_delete. Lower case and easy to read but other then that mate its spot on

I agree with this completely. You definitely will want to normalize your style.
Having something like account-save is nice because you can reuse it for account-delete, account-edit, account-whatever... However, I hate using dashes because I cannot double click the id/attribute. So I prefer to do things with underscores like account_delete, account_edit, account_whatever so I can double click things and also easily find things by 'feature' just by searching "account_".