如何将标签置顶在输入文字的css上才是最好的形式。

Question

我开始学习css和html，这个疑问就出现了，如何将标签定位在inputtext上面才是最好的做法。

我是这样做的

<p style = {{flexDirection: 'column', display:'flex'}}>  
                        <p style = {{flexDirection: 'column', display:'flex'}}>
                            <label> Nome Fantasia </label>
                            <input type = 'text' placeholder = 'Digite o Nome Fantasia'></input>
                        </p>
                        <p  style = {{flexDirection: 'column', display:'flex'}} > 
                            <label> Razão Social</label>
                            <input type = 'text' placeholder = 'Digite a Razão Social'></input>
                        </p>
                    </p>
                    <p style = {{flexDirection:'row', display:'flex', justifyContent:'space-between'}}> 
                        <p style = {{flexDirection:'column', display:'flex'}}>
                            <label> CNPJ </label>
                            <input style = {{width:'100%'}} placeholder = 'Digite o CNPJ da empresa'></input>
                        </p>
                        <p style = {{flexDirection:'column', display:'flex'}}>
                            <label> Inscrição estadual </label>
                            <input placeholder = 'Digite sua inscrição estadual'></input>
                        </p>
                    </p>
                    <p style = {{flexDirection:'column', display:'flex'}}>
                        <p>
                            <p style = {{flexDirection:'column', display:'flex'}} >
                                <label> Telefone </label>
                                <input type = 'text' placeholder= 'Telefone'></input>
                            </p>
                            <p style = {{flexDirection:'column', display:'flex'}} >
                                <label> Email </label>
                                <input type = 'text' placeholder= 'Email'></input>
                            </p>
                        </p>
                    </p>

结果

还有一种更实用、更简洁的方法，将输入文本放在文本标签下，你会怎么做？

Answer 1

您可以使用 for 属性

Html:

<p style = {{flexDirection: 'column', display:'flex'}}>
  <label for="nomeFantasia"> Nome Fantasia </label>
  <input type = 'text' id="nomeFantasia" placeholder = 'Digite o Nome Fantasia'>/input>
</p>

CSS。

label {display:block;}

工作笔。https:/codepen.iobuzztntpenbGEEOdJ

MDN关于.NET的文章 https:/developer.mozilla.orgen-USdocsWebHTMLElementlabel。