Javascript and css to make it responsive and computable.

Community feedback

• 

  Elevate•240

  @i7ectorPosted almost 2 years ago

  Good try @MayckL2!

  here's something that will make your forms look much better.

  HTML example:

  <div class="insert-name">
  <label>Name</label>
    <input type="text" placeholder="e.g Stephen King" required />
  <label>Email Address</label>
    <input type="text" placeholder="e.g [email protected]" required />
  <label>Phone Number</label>
    <input type="text" placeholder="e.g +1 234567890" required />
  </div>
  

  by adding the placeholder in the input tag you'll be able to display any text and when an user goes to type they don't need to get rid of the old text before being able to input info.

  then you can go into your css style file and target the placeholder and customise it to your liking.

  CSS Styles example:

  .insert-name input::placeholder {
    font-weight: bold;
    color: #000000;
    opacity: 0.5;
  }
  

  so you select the div and then you select the input tag in that div and then :placeholder in the above example you'll be able to style the placeholder, for example you'll be able to change the text color, font-size, weight and the main thing is the opacity which you can do 0.5 and or 50% to achieve the look and functionality in the design you built above.

  hope this helps! good luck and happy coding :)

  Marked as helpful

  0