alang-dev / auto-parts

A comprehensive training project aimed at teaching HTML, CSS, and JavaScript by developing a static website about auto parts.

https://auto-ca86d.web.app/

2 stars 0 forks source link

[HTML] User Profile Management Page #6

Closed alang-dev closed 3 weeks ago

alang-dev commented 2 months ago

Requirements:

File Name: user-profile.html
Header:
- Title: "User Profile Management"
Profile Information Section:
- Display the following user information:
  - Full Name
  - Email
  - Phone Number
  - Address
  - Profile Picture (optional)
Form for Updating Profile Information:
- A form for users to update their profile information.
- Fields in the form:
  - Full Name (input text)
  - Email (input email)
  - Phone Number (input text)
  - Address (textarea)
  - Profile Picture (file input)
Basic HTML Structure:
- Use proper HTML5 semantics.
- Ensure the form elements are correctly labeled.
- Include placeholders in the form fields for better UX.

Acceptance Criteria:

The HTML file should be named user-profile.html.
The file should contain a section displaying the user profile information as specified.
The file should include a form for updating profile information with appropriate input fields.
The HTML should be well-structured and formatted for readability.

POLOONGXIM commented 2 months ago

<!DOCTYPE html>

User Profile Management

Profile Information

Full Name: Pamiuoi

Email: pamiuxing@gmail.com

Phone Number: +1-234-567-8901

Address: Dong Giang, Quang Nam, Viet Nam

Profile Picture:

Update Profile Information

alang-dev commented 2 months ago

Hi @POLOONGXIM , please format your code as Markdown. As of 30 Aug, it is incorrect format. And put your user name in the Assignees

Thanks

POLOONGXIM commented 2 months ago

User Profile Management

Your Profile Information

Full Name: John Doe
Email: johndoe@example.com
Phone Number: +1234567890
Address: 123 Main St, Anytown, USA

Profile Picture:

Profile Picture

Update Your Profile Information

Full Name

[ Enter your full name ]

Email

[ Enter your email ]

Phone Number

[ Enter your phone number ]

Address

[ Enter your address ]

Profile Picture

[ Upload your profile picture ]

[Update Profile]

alang-dev commented 2 months ago

Hi @POLOONGXIM , Great start!

Please take a look at some comments below:

Are there other alternatives beside strong tag? How are they different? Which one is more suitable for your code?
Why do you think Address TextArea rows="0"?
I see that you have put some attributes + values for the form:
```
<form
action="/update-profile"
method="post"
enctype="multipart/form-data"
>
```
can you explain this code please? when should we use multipart/form-data? why is it POST in method?
For the phone input, can we use 'type=tel'?
You have grouped your code in 2 sections which is good. Can you explain what is the purpose of putting id in the section tag?

POLOONGXIM commented 1 month ago

Strong ,b ,Em

Use strong for important information.
Use em for emphasis (often rendered as italic).
Use b for bold text without any semantic meaning.

Textarea Rows

Ensure rows is set to a positive number, usually 3-5 for a normal-sized input.

Form Attributes

POST is appropriate for submitting sensitive data.
multipart/form-data is necessary when handling file uploads.

`type="tel"`

This type improves UX for phone number input fields, especially on mobile devices.

Section IDs

Using ids is a good practice for targeting sections in CSS or JavaScript, especially for form handling, validation, or styling.