Clever Geek Handbook

Semantic HTML Signature Tag

When creating an HTML form to be converted to PDF, I just realized that there is no HTML tag to indicate that the underlined block is a signature (or needs to be signed).

Any suggestions on how to use a semantically correct HTML element for the signature?

+3


source to share


3 answers


Why not use input? This way you get the right semantics. For example, screen readers will understand that the user has to present information.



.signature {
    border: 0;
    border-bottom: 1px solid #000;
}
      

        
        
        
      

    
<input type="text" class="signature" />
Run codeHide result


+21


source


You can create an input tag and then draw it so that it only has a bottom border

input {
  border: none;
  border-bottom: 1px solid black;
}


Simple code to illustrate an idea

Edit: just noticed that someone else posted the same solution when I was typing this. What's with all the downvotes of these answers?

+1


source


There are several things you could do to achieve this. Parameter number one is div c border-bottom

, but this is not editable. It can be viewed here:

#signaturename {
  text-align: center;
  font-weight: bold;
  font-size: 150%;
}

#signature {
  width: 100%;
  border-bottom: 1px solid black;
  height: 30px;
}
      

        
        
        
      

    
<div id="signaturename">
  Signature:
</div>

<div id="signature">
</div>
Run codeHide result


The seconds parameter, which is editable, will be a simple input field:

#signaturetitle {
  font-weight: bold;
  text-align: center;
  font-size: 150%;
}

#signature {
  width: 100%;
  border: 0px;
  border-bottom: 1px solid black;
  height: 30px;
}
      

        
        
        
      

    
<div id="signaturetitle">
  Signature:
</div>

<input type="text" id="signature">
Run codeHide result


EDIT

Now we just think about another way to achieve what we want! :)

Perhaps you can use _

, but would the spaces be correct? False, there is work! View here:

#signaturetitle {
  text-align: center;
  font-weight: bold;
  font-size: 200%;
}

#signature {
  text-align: center;
  height: 30px;
  word-spacing: 1px;
}
      

        
        
        
      

    
<div id="signaturetitle">
  Signature:
</div>

<div id="signature">
  ______________________________
</div>
Run codeHide result


As you can see with this, I am just adding a CSS property word-spacing

.

+1


source






More articles:


All Articles