Html 必填字段的星号

asterisk symbol for required field

提问by user3386779

I want to place a '*' symbol after an input box. I have a problem while displaying.

我想在输入框后放置一个“*”符号。我在显示时遇到问题。

This problem is due to inputbox css code. Here I attached my css,html within php code with a screenshot.

此问题是由于输入框 css 代码造成的。在这里，我在 php 代码中附上了我的 css,html 和屏幕截图。

 echo '<p>Name<input type="text" name="pname" id="pname" size=18 maxlength=50 required value="'.$name.'" >*</p>';

         echo "<p>Email<input type=text name=email id=email size=18 maxlength=50 required onblur='javascript:myFunction(this.value,\"".$fet['email']."\");' value='".$email."' >*</p>";
         echo '<p>Phone<span id="error" style="color: Red; display: none"><img src="image/number.png" width=20px height=20/></span><input type="text" name="phone" size=18 maxlength=50 required onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" value="'.$phone.'" ></p>';
         echo '<p>Company Name<input type="text" name="cname" id="cname" size=18 maxlength=50 required value="'.$cname.'" ></p>';

css code for input

输入的css代码

input {
display: inline-block;
float: right;
margin-right:20%;
}

回答by Chris Baker

You are floating the fields right, so they are plucked out of the line and pushed to the right of the container. The asterisks are not floated, so they stay in line with the rest of the text that is also not floated.

您将字段向右浮动，因此它们被从线中拔出并推到容器的右侧。星号没有浮动，因此它们与未浮动的其余文本保持一致。

To correct, you should place the field and the asterisk in a container that is itself floated right, rather than floating the field.

要更正，您应该将字段和星号放在一个本身向右浮动的容器中，而不是将字段浮动。

I would suggest a structure more like this instead:

我建议的结构更是这样，而不是：

<p class="field-wrapper">
    <label>Field label</label>
    <input type="text" name="fieldName" id="fieldId" size=18 maxlength=50 value="fieldValue" />
</p>

You can add a required-fieldclass on the wrapper, like this:

您可以required-field在包装器上添加一个类，如下所示：

  <p class="field-wrapper required-field">

... and use css like this:

...并像这样使用css：

p.field-wrapper input {
    float: right;
}
p.required-field label::after { 
    content: "*";
    color: red;
}

Try it: http://jsfiddle.net/q8rsLz16/

试试看：http: //jsfiddle.net/q8rsLz16/

Documentation & Related Reading

文档和相关阅读

• All about Floats via CSS Tricks - http://css-tricks.com/all-about-floats/
• CSS ::beforepseudo-selector - https://developer.mozilla.org/en-US/docs/Web/CSS/::before
• CSS ::afterpseudo-selector - https://developer.mozilla.org/en-US/docs/Web/CSS/::after

• 所有关于通过 CSS 技巧的浮动 - http://css-tricks.com/all-about-floats/
• CSS::before伪选择器 - https://developer.mozilla.org/en-US/docs/Web/CSS/::before
• CSS::after伪选择器 - https://developer.mozilla.org/en-US/docs/Web/CSS/::after

回答by terary

I think you'll have to couple the asterisks with the text box if you want to use 'margin-right:'. You can put all in a div, and give it the right margin

如果您想使用“margin-right:”，我认为您必须将星号与文本框结合起来。你可以把所有的都放在一个 div 中，并给它右边距

回答by rashedcs

<label>Name<span  style="color:red"> *</span></label>
<input type="text" name="pname" id="pname" size=18 maxlength=50 required value="">
<div class="clearfix" style="margin-bottom:10px"> </div>


<label>Email<span  style="color:red"> *</span></label>
<input type="text" name="pname" id="pname" size=18 maxlength=50 required value="">