# BUILT MY FIRST SIMPLE FORM

**URL:** <https://forum.freecodecamp.org/t/built-my-first-simple-form/734925>\
**Category:** I Built This\
**Created:** [February 14, 2025, 9:37am UTC](https://forum.freecodecamp.org/t/built-my-first-simple-form/734925 "2025-02-14T09:37:22Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![libongow](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/libongow/32/380667_2.png) [@libongow](https://forum.freecodecamp.org/u/libongow)\
**Post date:** [February 14, 2025, 9:37am UTC](https://forum.freecodecamp.org/t/built-my-first-simple-form/734925/1 "2025-02-14T09:37:22Z")

</div>

Hey everyone! Today, I challenged myself to build a simple form **without checking my computer for help** , and I actually did it! 🎉

This form may be simple, but it’s a huge milestone for me because I finally **understand how elements work together and how to structure them properly**. Seeing it appear exactly as I expected was an amazing feeling!

Here’s what I learned while building it:  
✅ How to structure a form with `<fieldset>`, `<legend>`, `<input>`, and `<label>`  
✅ How different elements interact inside a `<form>`  
✅ The importance of organizing elements properly for readability

I’m really proud of this small win and will keep experimenting to improve my skills. Next, I plan to build a more complex form and explore CSS styling.

Any feedback or tips from more experienced developers? Also, when did you feel like you had your first “aha!” moment in coding? Let’s share and inspire each other! 🚀

#WebDevelopment #HTML #CodingJourney #BeginnerDev #LearningToCode

 ![CODE SCREENSHOT](https://global.discourse-cdn.com/freecodecamp/original/4X/9/6/4/964a2dda6d44215e8cdbed91cf31d07ce9489533.jpeg)

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [February 14, 2025, 9:43am UTC](https://forum.freecodecamp.org/t/built-my-first-simple-form/734925/2 "2025-02-14T09:43:15Z")

</div>

> [@libongow](#):
>
> Any feedback

You may want to share your code if you want feedback on that

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [February 14, 2025, 10:14am UTC](https://forum.freecodecamp.org/t/built-my-first-simple-form/734925/4 "2025-02-14T10:14:54Z")

</div>

Never share code as an image please.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (`</>`) to add backticks around text.

 ![Pre-formatted-text](https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif)

See [this post](https://forum.freecodecamp.org/t/forum-code-formatting/25574) to find the backtick on your keyboard.  
**Note:** Backticks (`) are not single quotes (').

---

<div class="post-metadata">

**Author:** ![libongow](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/libongow/32/380667_2.png) [@libongow](https://forum.freecodecamp.org/u/libongow)\
**Post date:** [February 14, 2025, 10:20am UTC](https://forum.freecodecamp.org/t/built-my-first-simple-form/734925/5 "2025-02-14T10:20:00Z")

</div>

```auto
<div>
<form>
<fieldset>
<legend>Personal Details</legend>
<label for="name">Name</label>
<input type="text" id="name" name="user_name">#

<br>

<legend>Contact Details</legend>
<label for="email">Email</label>
<input type="text" id="email" name="user_email">

<br>

<button type="submit">Submit</button>
</fieldset>
</form>
</div>

```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [February 14, 2025, 10:23am UTC](https://forum.freecodecamp.org/t/built-my-first-simple-form/734925/6 "2025-02-14T10:23:00Z")

</div>

do not use `br` to make space between elements, you should use your css for that

---

<div class="post-metadata">

**Author:** ![libongow](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/libongow/32/380667_2.png) [@libongow](https://forum.freecodecamp.org/u/libongow)\
**Post date:** [February 14, 2025, 10:35am UTC](https://forum.freecodecamp.org/t/built-my-first-simple-form/734925/7 "2025-02-14T10:35:26Z")

</div>

Yeah, the line break is meant to separate texts not elements, wow totally forgot, thank you!

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [February 14, 2025, 10:35am UTC](https://forum.freecodecamp.org/t/built-my-first-simple-form/734925/8 "2025-02-14T10:35:56Z")

</div>

it is specifically for text that goes on multiple lines but is a single entity, like an address

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [August 15, 2025, 10:36pm UTC](https://forum.freecodecamp.org/t/built-my-first-simple-form/734925/9 "2025-08-15T22:36:52Z")

</div>

Closed on August 15, 2025, 10:36pm UTC

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.