A semantic HTML tag for a signature [closed]

Question

While making a form in HTML which will get converted to PDF, I just realized there is no HTML tag that conveys the meaning that the underlined block is a signature (or should be signed).

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

Answer 1

Why not use an input? This way, you get the correct semantics. For example, screen readers will understand that the user is expected to submit information.

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

<input type="text" class="signature" />

Answer 2

You can make an input tag, then style it so that it only has a border on the bottom

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

Simple codepen to illustrate the idea

Edit: Just noticed somebody else posted the same solution while I was typing this. What's with all the downvotes of these answers?

Answer 3

There are a couple of things you could do to achieve this. Option number one is a div with a border-bottom, but that is not editable. That 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>

The seconds option, which is editable, would be just a simple input box:

#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">

---

EDIT

Now just thinking of another way to achieve what you would like! :)

You could perhaps use _, but there would be spaces right? False, there is a work around! 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>

As you can see with this one I am simply just adding the CSS property word-spacing.