Export code in input filed it make SVG, i need html <input>

Ask the community
,
1

I’m designing a form in Penpot, and I have a text element like this below, which looks like an input field but is actually an SVG div with a placeholder text:

<div class="shape text txt55-7844b55d5cb0">
      <svg width="176" xmlns="http://www.w3.org/2000/svg" height="32" id="screenshot-37e729db-14a6-808b-8006-7844b55d5cb0" viewBox="1251 613 176 32" style="-webkit-print-color-adjust:exact" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1">
        <style></style>
        <g id="shape-37e729db-14a6-808b-8006-7844b55d5cb0">
          <defs></defs>
          <g transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="text-container" x="1251.0000005414786" y="613" width="176" height="32" rx="0" ry="0">
            <defs>
              <pattern patternUnits="objectBoundingBox" width="69.05000305175781" height="14" id="fill-0-render-18150-0">
                <g>
                  <rect width="69.05000305175781" height="14" style="fill:#7B7D85;fill-opacity:1"></rect>
                </g>
              </pattern>
            </defs>
            <g class="fills" id="fills-37e729db-14a6-808b-8006-7844b55d5cb0"><text x="1251.0000005414786" 
               y="636" dominant-baseline="ideographic" textLength="69.05000305175781" 
               lengthAdjust="spacingAndGlyphs" style="text-transform:none;
                  font-family:&quot;Work 
                Sans&quot;;letter-spacing:normal;font-style:normal;
                font-weight:400;white-space:pre;font-
               size:12px;text-decoration:rgb(123, 125, 133);
            direction:ltr;fill:#7B7D85;fill-opacity:1">Placeholder</text></g>
          </g>
        </g>
      </svg>
    </div>

I want to replace or recreate this SVG placeholder using real HTML input fields. Ideally, I want to use something like this instead:

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

How can I properly replace Penpot’s preset text elements (that visually look like input fields) with actual form inputs?
Also, is there a way in Penpot to use presets or assets to simulate real HTML form elements like

2

Hello @Naman

The code export Penpot has right now doesn’t respect any semantics from HTML. As of right now, everything we do will be translated as a cluster of divs and nothing else. I prefer to always recreate my HTML elements instead of using what Penpot (or any other prototyping tool) gives me, because it’s easier to control and configure stuff.

Maybe in the future Penpot will have a better and more semantic code rendering from prototypes, for now, it’s better to recreate the code yourself using the properties on the info panel.

2 Likes
3

Html and Css code direct change in (Inspect code) section
or copy and use another tool