Create a Text Field - Question

HTML-CSS
1

Tell us what’s happening:
while creating a text input, when i only type word input followed by opening < , i can already see the text box in output window without defining type attribute, so why we need to define type = “text” , I dont think it is doing anything special.

Your code so far

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back. " src="https://bit.ly/fcc-relaxing-cat"></a>

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
<input type ="text">

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36.

Link to the challenge:
https://www.freecodecamp.org/challenges/create-a-text-field

2

If you want to write something in input box the default value of the type attribute is text. For example, if you want to use the input box for email you will use a type attribute with ‘email’ value.
I think i answered your question

1 Like
3

The input type in a form field is used to tell the browser how to deal with that particular element. It really does make a difference. For example, a login form may have the first field type set to “text” and the second set to “password”. The browser knows that it should show the text you entered into the first field, but that it should conceal the text in the second field:

image

This is also important when using Bootstrap or jQuery for client-side validation. If the field type is set to “email” and you enter something that’s not an email, you’ll get a warning.

image

So just because a field with type="text" and a field with type="email" look the same, it doesn’t mean that the browser will treat them the same way.

1 Like
4

Thank you for explanation! :slight_smile:

6

Thank you! :slight_smile: Now i understand this!