1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Phantom line in my form

Discussion in 'HTML & Website Design' started by piropeator, Dec 6, 2016.

0
  1. #1
    I have this form using bootstrap.
        <div class="container">

        <div class="modal fade" id="login" data-backdrop="static">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">

                    <div class="modal-body">
                        <form name="form" class="" action="login.php" method="POST" enctype="multipart/form-data">
                            <div class="form-group">
                                <div class="col-md-12">
                                    <input type="text" class="form-control" id="user" placeholder="User Name">
                                </div>               
                            </div>
                            <div class="form-group">
                                <div class="col-md-12">
                                    <input type="password" class="form-control" id="password" placeholder="Password">
                                </div>           
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-lg btn-block btn-primary">Process</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    HTML:
    The form shows a line on the input type user.
    I can not find the problem.
     
    Solved! View solution.
    piropeator, Dec 6, 2016 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #2
    We'd need to see your css to really be able to help - or your site - or you could set up a jsfiddle for us to play with
     
    sarahk, Dec 6, 2016 IP
  3. #3
    Using your bare html, cannot replicate your issue. Like @sarahk, I'd want to see your presentation code.

    Why aren't you using the proper html element, FIELDSET, instead of the unsemantic DIV? I see no compelling reason to do it twice. For example: 
    
<body>
  <div class="container">
    <form name="form"
        action="login.php"
        method="POST"
        enctype="multipart/form-data">
    <fieldset>
      <legend>Login</legend>

      <label for="user">User Name:
        <input type="text"
            name="user"
            id="user">
      </label>

      <label for="password">Password:
        <input type="password"
            name="pword"
            id="password">
      </label>

      <button type="submit">Submit</button>
    </fieldset>
   </form>
  </div> <!-- end container -->
</body>
    Code (markup):
    Do not succumb to the stupidity that is Bootstrap, as evidenced by deeply nested, unnecessary divs and the use of a grid system and ridiculously named, multiple classes.

    The placeholder attribute is not a substitute for LABEL. The html5 specifications explicitly warn against that silliness.

    I'd suggest you use the term submit rather than process for the submit button. Process may seem cooler, but users know, from long use, what submit means. (Unless they're more into D&S than submitting forms.)

    cheers,

    gary
     
    kk5st, Dec 6, 2016 IP
  4. piropeator

    piropeator Well-Known Member

    Messages:
    194
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    121
    #4
    That means I should not use bootstrap?
     
    piropeator, Dec 7, 2016 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    I'd say no. It's an additional layer of abstraction that adds bloat to the page and increases the cost of maintenance and debugging. Why learn a new app in addition to the simple coding that it's supposed to be helping you with?

    For more regarding Bootstrap, use the search function with keywords, bootcrap and @deathshadow.

    cheers,

    gary
     
    kk5st, Dec 7, 2016 IP
  6. piropeator

    piropeator Well-Known Member

    Messages:
    194
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    121
    #6
    Thank you for your suggestion.
    I'm using bootstrap for two reasons:
    1) I do not have a lot of time to test my own code, and
    2) It's a small project.
    Bootstrap reduces the time of layout and that is of great help. I know this is not a good way.
    I'll be back to using my own code. Thanks again.
     
    piropeator, Dec 7, 2016 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    So you're using some massive bloated wreck of developer ineptitude that makes you write more markup and more of your own CSS than you'd have without that mouth-breathing asshattery?

    Not any more...

    Since it makes you write more code than you'd have without it, how is it reducing a blasted thing? that's another of those BULLSHIT claims I hear about these dumbass herpaderp frameworks that's COMPLETELY unsupported by the results.

    ... and yeah, your form is malformed rubbish; and placeholder is NOT a label! Even the huffing specification says "don't do that!".
    https://lmgtfy.com/?q=Placeholder+is+not+a+label

    The modal retardation that's likely scripttard only probably isn't helping either.... or the endless pointless DIV for nothing, endless pointless classes for nothing (a bootcrap hallmark), etc, etc...

    It is HIGHLY doubtful that you probably need much more than this for markup:

    
<form action="login.php" method="POST" enctype="multipart/form-data" id="modalLogin">
	<fieldset>
		<label for="modalLogin_user">User Name:</label>
		<input type="text" name="user" id="modalLogin_user">
		<br>
		<label for="modalLogin_pass">Password:</label>
		<input type="password" name="password" id="modalLogin_pass">
		<br>
		<button>Process</button>
	</fieldset>
</form>
    Code (markup):
    Kicking all those idiotic DIV and presentational classes undoing the entire REASON CSS exists to the curb. Put a <input type="checkbox"> before it and a associated label as the "link" and you could probably even show/hide the modal without scripttardery either!

    the ONLY thing you can learn from Bootcrap is how NOT to build a website. By its very nature it drags markup practices back to the WORST of the PRE-CSS era.
     
    Last edited: Dec 7, 2016
    deathshadow, Dec 7, 2016 IP
  8. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #8
    @deathshadow: I thought <legend> was mandatory for a <fieldset>? Did they change the specs?
     
    PoPSiCLe, Dec 9, 2016 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    kk5st, Dec 9, 2016 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Which like a lot of things came about because instead of making browser makers obey the specification or JOE FORBID treat elements the same way, they altered the specification to match the implementation.

    Browser makers make it near impossible to style <legend> consistently cross-browser? Fine, omit it or use an appropriate level numbered heading instead. In this case (unlike most of 5's "Let's just shit new tags into the specification for NOTHING!") I agree with it as a numbered heading would/should make more sense anyways and it's one LESS tag to worry about.

    But I'm in that small group who thought HTML 4 had a few too many tags and the LAST thing we needed was more of them!

    Side note, see the gibberish legalese only a gaggle of lawyers could decipher on those two sections of the specification you linked to? THAT'S as much a part of the problem as anything else. It's like the specs were written by a Finnish lawyer, translated to Japanese, then back to English by some macho business donkey wrestler.

    I had a small house of brokerage on Wall Street. Many days no business come to my hut; but Jimmy has fear? A thousand times no! I never doubted myself for a minute for I knew that my monkey strong bowels were girded with strength like the loins of a dragon ribboned with fat and the opulence of buffalo dung. The glorious sunset of my heart was fading. Soon the super karate monkey death car would park in my space. But Jimmy has fancy plans, and pants to match. The monkey clown horrible karate round and yummy like cute small baby chick would beat the donkey.
     
    Last edited: Dec 10, 2016
    deathshadow, Dec 10, 2016 IP
  11. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #11
    My mistake. In htm4l's spec, I was seeing the asterisk outside the grouping parentheses. 
    
<!ELEMENT FIELDSET - - (#PCDATA,LEGEND,(%flow;)*) -- form control group -->
    Code (markup):
    So, yes, the legend element was made optional in html5.

    cheers,

    gary
     
    kk5st, Dec 10, 2016 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #12
    ... and XHTML 1.0

    One of the reasons I used XHTML 1.0 for so long. Hence the XHTML 1.0 DTD for that reading:
    https://www.w3.org/TR/xhtml1/dtds.html#dtdentry_xhtml1-strict.dtd_fieldset

    
<!--
  The fieldset element is used to group form fields.
  Only one legend element should occur in the content
  and if present should only be preceded by whitespace.
-->
<!ELEMENT fieldset (#PCDATA | legend | %block; | form | %inline; | %misc;)*>
    Code (markup):
    |, so they're all optional. The comment preceding it helps too since it says "IF present".
     
    Last edited: Dec 10, 2016
    deathshadow, Dec 10, 2016 IP
  13. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #13
    @deathshadow I think that's why I misread the spec. I always used xhtml 1.0 and was surprised to not see the OR operator, and my mind forced the * into the wrong spot.

    Thanks for the reminder on xhtml.

    gary
     
    kk5st, Dec 10, 2016 IP