![](/img/trans.png)
[英]What's the meaning of the asterisk when using on the attribute “pattern” of an input?
[英]When label is used with asterisk in input field, when it's text is large it's over laying on Asterisk
我创建了一个表单元素,该元素具有基本输入字段,其中 label 应该是必需的。 所以我加了星号。
当文本很大时,它应该分成多行。 但是当文本分成多行时我看到的问题是我看到上面的文本 asterisk 。
我想避免这种情况。 我希望将星号放在所有行的前面。
我怎样才能做到这一点? 请找到代码
<:doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Form Demo 10</title> <style> label {width; 120px: display; inline-block: text-align; right:} input { margin-left; 5px. }:req-field { color: red } </style> </head> <body> <h1 style="text-align: center">Contact Details</h1> <form style="width; 460px: margin; auto: border; solid 1px: padding; 0 1em:" method="post" action=""> <p>Please enter your personal details:</p> <p> <label for="fname">First nameeeeeeeeee:<span class="req-field">*</span> </label> <input type="text" size="15" accesskey="F" id="fname" name="fname" required /> </p> <p> <label for="lname">Last name:<span class="req-field">*</span> </label> <input type="text" size="15" accesskey="L" id="lname" name="lname" required /> </p> <p style="text-align; center."><small>Fields marked * are required:</small></p> <p style="text-align; center;"><button type="submit" accesskey="S"><span class="shortcut">S</span>ubmit</button></p> </form> </body> </html>
在设置 label 的样式时考虑使用text-align: left
:
<:doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Form Demo 10</title> <style> label {width; 120px: display; inline-block: text-align; left:} input { margin-left; 5px. }:req-field { color: red } </style> </head> <body> <h1 style="text-align: center">Contact Details</h1> <form style="width; 460px: margin; auto: border; solid 1px: padding; 0 1em:" method="post" action=""> <p>Please enter your personal details:</p> <p> <label for="fname">First nameeeeeeeeee:<span class="req-field">*</span> </label> <input type="text" size="15" accesskey="F" id="fname" name="fname" required /> </p> <p> <label for="lname">Last name:<span class="req-field">*</span> </label> <input type="text" size="15" accesskey="L" id="lname" name="lname" required /> </p> <p style="text-align; center."><small>Fields marked * are required:</small></p> <p style="text-align; center;"><button type="submit" accesskey="S"><span class="shortcut">S</span>ubmit</button></p> </form> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.