web-dev-qa-db-fra.com

Intégration des étoiles CSS dans un formulaire HTML

J'ai vu un tutoriel en ligne - http://www.htmldrive.net/items/show/402/CSS-Star-Rating-System - pour créer un système CSS de classement par étoiles.

Sur la page, ils ont ce code:

<ul class="rating">
   <li><a href="#" title="1 Star">1</a></li> 
   <li><a href="#" title="2 Stars">2</a></li>
   <li><a href="#" title="3 Stars">3</a></li>
   <li><a href="#" title="4 Stars">4</a></li>
   <li><a href="#" title="5 Stars">5</a></li>
</ul>

D'après ce que je peux dire, ce n'est qu'une liste. Comment pourrais-je l'intégrer dans mon formulaire, afin que les informations du classement par étoiles puissent être soumises à une base de données. Mon code actuel pour le formulaire est ci-dessous:

 <p>Quality</p>
 <input type="radio" name="ratingquality" value="1"> 
 <input type="radio" name="ratingquality" value="2"> 
 <input type="radio" name="ratingquality" value="3"> 
 <input type="radio" name="ratingquality" value="4"> 
 <input type="radio" name="ratingquality" value="5">
htmlcssformsrating-system
13
Amar H-V

C'est très facile à utiliser, il suffit de copier-coller le code. Vous pouvez utiliser votre propre image d'étoile en arrière-plan.

J'ai créé une variable var userRating. vous pouvez utiliser cette variable pour obtenir la valeur des étoiles.

Prendre plaisir!! :)

$(document).ready(function(){
    // Check Radio-box
    $(".rating input:radio").attr("checked", false);

    $('.rating input').click(function () {
        $(".rating span").removeClass('checked');
        $(this).parent().addClass('checked');
    });

    $('input:radio').change(
      function(){
        var userRating = this.value;
        alert(userRating);
    }); 
});
.rating {
    float:left;
    width:300px;
}
.rating span { float:right; position:relative; }
.rating span input {
    position:absolute;
    top:0px;
    left:0px;
    opacity:0;
}
.rating span label {
    display:inline-block;
    width:30px;
    height:30px;
    text-align:center;
    color:#FFF;
    background:#ccc;
    font-size:30px;
    margin-right:2px;
    line-height:30px;
    border-radius:50%;
    -webkit-border-radius:50%;
}
.rating span:hover ~ span label,
.rating span:hover label,
.rating span.checked label,
.rating span.checked ~ span label {
    background:#F90;
    color:#FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating">
    <span><input type="radio" name="rating" id="str5" value="5"><label for="str5"></label></span>
    <span><input type="radio" name="rating" id="str4" value="4"><label for="str4"></label></span>
    <span><input type="radio" name="rating" id="str3" value="3"><label for="str3"></label></span>
    <span><input type="radio" name="rating" id="str2" value="2"><label for="str2"></label></span>
    <span><input type="radio" name="rating" id="str1" value="1"><label for="str1"></label></span>
</div>
25
Gargiya

Voici comment intégrer le nombre d'étoiles CSS dans un formulaire HTML sans utiliser javascript (uniquement html et css):

CSS: 

.txt-center {
    text-align: center;
}
.hide {
    display: none;
}

.clear {
    float: none;
    clear: both;
}

.rating {
    width: 90px;
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: center;
    position: relative;
}

.rating > label {
    float: right;
    display: inline;
    padding: 0;
    margin: 0;
    position: relative;
    width: 1.1em;
    cursor: pointer;
    color: #000;
}

.rating > label:hover,
.rating > label:hover ~ label,
.rating > input.radio-btn:checked ~ label {
    color: transparent;
}

.rating > label:hover:before,
.rating > label:hover ~ label:before,
.rating > input.radio-btn:checked ~ label:before,
.rating > input.radio-btn:checked ~ label:before {
    content: "\2605";
    position: absolute;
    left: 0;
    color: #FFD700;
}

HTML: 

<div class="txt-center">
    <form>
        <div class="rating">
            <input id="star5" name="star" type="radio" value="5" class="radio-btn hide" />
            <label for="star5">☆</label>
            <input id="star4" name="star" type="radio" value="4" class="radio-btn hide" />
            <label for="star4">☆</label>
            <input id="star3" name="star" type="radio" value="3" class="radio-btn hide" />
            <label for="star3">☆</label>
            <input id="star2" name="star" type="radio" value="2" class="radio-btn hide" />
            <label for="star2">☆</label>
            <input id="star1" name="star" type="radio" value="1" class="radio-btn hide" />
            <label for="star1">☆</label>
            <div class="clear"></div>
        </div>
    </form>
</div>

Veuillez vérifier démo

4
Shadi Abu Hilal

Que dis-tu de ça? J'avais besoin exactement de la même chose, je devais en créer un à partir de zéro. C'est PURE CSS et fonctionne dans IE9 + N'hésitez pas à l'améliorer.

Démo: http://www.d-k-j.com/Articles/Web_Development/Pure_CSS_5_Star_Rating_System_with_Radios/

<ul class="form">
    <li class="rating">
        <input type="radio" name="rating" value="0" checked /><span class="hide"></span>
        <input type="radio" name="rating" value="1" /><span></span>
        <input type="radio" name="rating" value="2" /><span></span>
        <input type="radio" name="rating" value="3" /><span></span>
        <input type="radio" name="rating" value="4" /><span></span>
        <input type="radio" name="rating" value="5" /><span></span>
    </li>
</ul>

CSS:

.form {
    margin:0;
}

.form li {
    list-style:none;
}

.hide {
    display:none;
}

.rating input[type="radio"] {
    position:absolute;
    filter:alpha(opacity=0);
    -moz-opacity:0;
    -khtml-opacity:0;
    opacity:0;
    cursor:pointer;
    width:17px;
}

.rating span {
    width:24px;
    height:16px;
    line-height:16px;
    padding:1px 22px 1px 0; /* 1px FireFox fix */
    background:url(stars.png) no-repeat -22px 0;
}

.rating input[type="radio"]:checked + span {
    background-position:-22px 0;
}

.rating input[type="radio"]:checked + span ~ span {
    background-position:0 0;
}
3
Dan Jones

CSS:

.rate-container > i {
    float: right;
}

.rate-container > i:HOVER,
.rate-container > i:HOVER ~ i {
    color: gold;
}

HTML:

<div class="rate-container">
    <i class="fa fa-star "></i>
    <i class="fa fa-star "></i>
    <i class="fa fa-star "></i>
    <i class="fa fa-star "></i>
    <i class="fa fa-star "></i>
</div>
2
Michel

Voici la solution .

Le HTML:

<div class="rating">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>

Le CSS:

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}

J'espère que cela t'aides.

Source

0
Nitesh

Je vais dire d'emblée que vous ne pourrez pas obtenir l'apparence qu'ils ont avec des boutons radio strictement CSS.

Vous pouvez cependant vous en tenir au style de liste dans l'exemple que vous avez publié et remplacer le anchors par un cliquable spans qui déclencherait un événement javascript qui, à son tour, enregistrerait cette note dans votre base de données via ajax .

Si vous avez suivi cette voie, vous souhaiterez probablement également enregistrer un cookie sur la machine des utilisateurs afin qu'ils ne puissent pas envoyer de nombreuses fois à votre base de données. Cela les empêcherait de soumettre plus d'une fois au moins jusqu'à ce qu'ils suppriment leurs cookies.

Mais bien sûr, il existe de nombreuses façons de résoudre ce problème. C'est juste l'un d'eux. J'espère que cela pourra aider.

0
jasonmerino