Modifier l'aspect d'un bouton dans une balise input

Louis_M04 Messages postés 5 Date d'inscription Statut Membre Dernière intervention -
Louis_M04 Messages postés 5 Date d'inscription Statut Membre Dernière intervention - 6 mai 2020 à 15:57

Bonjour,
je rencontre un problème lors de la mise en css de mon syte. Je m'explique, j'aimerai modifier l'aspect des boutons mais ces derniers servent à effectuer des actions javascrypt et sont donc compris dans des balises <INPUT>. Avez vous une solution, il y existe t-il une comande qui permet de les appeler via "type" ou "id"?

je vous met le css, html et js ici pour que vous puissiez voir:

HTML:

<html>
 <head>
  <meta charset="utf-8">
   <script type="text/javascript" src="code2.js"></script>
   <link href="style.css" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,90&display=swap" rel="stylesheet">
	<link rel="icon" type="image/png" href="favicon.png" />
	<title>césar</title>
 </head>
<body>
<br>
<h2>La fonction de césar</h2>


<table class= "exemple">
<tr>
<td>
<div class="shadowbox">
<FORM NAME="form2">
<INPUT TYPE="text" id="texte" VALUE="Texte à crypter" onfocus="this.value=''">  <BR>
<INPUT TYPE="text" id="decalage" VALUE="Valeur de décalage?" onfocus="this.value=''">  <BR>
<input type="button" id="btn1" value="Validez"	onClick="cesar()"> <BR>
<INPUT TYPE="text" id="resultat" VALUE="Texte crypté">  <BR>
</FORM>
</div>
</td>

<th>
<input type="button" id="btn3" value="Reset"onClick="reset()">
</th>


<td>
<div class="shadowbox">
<FORM NAME="form">
<INPUT TYPE="text" id="texte1" VALUE="Texte à décrypter" onfocus="this.value=''">  <BR>
<INPUT TYPE="text" id="decalage1" VALUE="Valeur de décalage?" onfocus="this.value=''">  <BR>
<input type="button" id="btn2" value="Validez"	onClick="decesar()"> <BR>
<INPUT TYPE="text" id="resultat1" VALUE="Texte décrypté">  <BR>
</FORM>
</div>
</td>
</tr>
</table>
</body>
</html>

CSS:

body {
  background-image:url("babibel.jpeg");
  background-position: center;
}


h2 {
  color: #FF7F50;
  text-align: center;
  font-style: italic , bold;
  font : monospace;
  border-radius: 10px;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  margin: 4px 40% 4px 40%;
  background-image: linear-gradient(90deg, #0162c8, #55e7fc)
}

.input{
  background-image: linear-gradient(90deg, #0162c8, #55e7fc)
}

.exemple{
  table-layout: fixed;
  width: 100%
}



.shadowbox {
  text-align: center;
  width: 15em;
  border-radius: 10px;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(90deg, #0162c8, #55e7fc);
}

input{
  margin:2px 0% 2px 0%;
}

.btn1{


}
.btn3{
  display: block;
  margin : 0 auto;


}

JS:


function cesar() {
var str=document.getElementById("texte").value;
var amount=parseInt(document.getElementById("decalage").value);
  
if (amount < 0)
 amount=amount+26;
  // variable pour stocker le résultat
  var res = '';
  // Parcourir chaque caractére
  for (var i = 0; i < str.length; i++) {
    // Récupérer le caractére que nous allons ajouter
    var c = str[i];
    // Vérifier si c'est une lettre
    if (c.match(/[a-z]/i)) {
      // Récupérer son code
      var code = str.charCodeAt(i);
      // Lettres majuscules
      if ((code >= 65) && (code <= 90))
        c = String.fromCharCode(((code - 65 + amount) % 26) + 65);
      // Lettres minuscules
      else if ((code >= 97) && (code <= 122))
        c = String.fromCharCode(((code - 97 + amount) % 26) + 97);
    }
    // Ajouter le caractére
    res += c;
  }
  // Résultat
	document.getElementById("resultat").value =res;
  return
};




function decesar() {
var str=document.getElementById("texte1").value;
var amount=parseInt(document.getElementById("decalage1").value);
  
if (amount < 0)
 amount=amount+26;
  // variable pour stocker le résultat
  var res = '';
  // Parcourir chaque caractére
  for (var i = 0; i < str.length; i++) {
    // Récupérer le caractére que nous allons ajouter
    var c = str[i];
    // Vérifier si c'est une lettre
    if (c.match(/[a-z]/i)) {
      // Récupérer son code
      var code = str.charCodeAt(i);
      // Lettres majuscules
      if ((code >= 65) && (code <= 90))
        c = String.fromCharCode(((code - 91 - amount) % 26) + 91);
      // Lettres minuscules
      else if ((code >= 97) && (code <= 122))
        c = String.fromCharCode(((code - 122 - amount) % 26) + 122);
    }
    // Ajouter le caractére
    res += c;
  }
  // Résultat
	document.getElementById("resultat1").value =res;
  return
};



function reset() {
document.getElementById("texte").value ="Texte à crypter";
document.getElementById("texte1").value ="Texte à décrypter";
document.getElementById("decalage").value ="Valeur de décalage?";
document.getElementById("decalage1").value ="Valeur de décalage?";
document.getElementById("resultat").value ="Texte crypté";
document.getElementById("resultat1").value ="Texte décrypté";
}

Voilà en espérant que c'est possible par ce que là je ne trouve pas ça beau...

ps: oui les couleurs sont moches mais c'est mon 1er site donc je joue avec un peu avec les couleurs. Je suis en train de mettre des plus belles couleurs

Afficher la suite

A voir également:

Modifier l'aspect d'un bouton dans une balise input
Modifier dns - Guide
Modifier liste déroulante excel - Guide
Modifier une story facebook - Guide
Modifier l'extension d'un fichier - Guide
Comment faire une capture d'écran sur un samsung sans bouton ? - Guide

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour,

Avez vous une solution, il y existe t-il une comande qui permet de les appeler via "type" ou "id"?

Oui... avec les selecteurs ...
par exemple pour les id il faut utiliser le dièse

#monid {
  //...
}

https://code.tutsplus.com/fr/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Réponse 2 / 2

Louis_M04 Messages postés 5 Date d'inscription Statut Membre Dernière intervention

Et si par exemple je veux rajouter un effet js comme celui ci que j'ai trouvé sur internet:

var boutons = document.getElementsByTagName('bouton');

Array.prototype.forEach.call(boutons, function (b) {
    b.addEventListener('click', createRipple);
});

function createRipple (e) {
    var circle = document.createElement('div');
    this.appendChild(circle);

    var d = Math.max(this.clientWidth, this.clientHeight);

    circle.style.width = circle.style.height = d + 'px';

var rect = this.getBoundingClientRect();
circle.style.left = e.clientX - rect.left -d/2 + 'px';
circle.style.top = e.clientY - rect.top - d/2 + 'px';

    console.log(this);

    circle.classList.add('ripple');
}

Cela fonctionnera t-il aussi?

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

On ne comprend rien à tes questions....
Ni le liens entre ta question initiale ... et ce "nouveau" code javascript....

Mais dans le principe.. Oui, tu peux ajouter tous les scripts que tu veux.. il faut juste les adapter à tes besoins.

Après.. j'ai l'impression que tu copies/colles du code trouvé ça et là sur le net ... sans en comprendre le fonctionnement...
Ce n'est clairement pas la bonne solution.
Il faut que tu essaies d'apprendre le fonction du javascript, des event, du html et du css.
Et surtout.. il faut essayer de comprendre le fonctionnement des scripts que tu trouves... sinon tu seras vite bloqué et ne sauras pas comment les modifier ou les intégrer dans tes codes..

Louis_M04 Messages postés 5 Date d'inscription Statut Membre Dernière intervention > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

En fait je cherche à mettre un effet javascript quand je clique sur un bouton, mais effectivement pour le javascript, il n'est pas au programme au lycée et pour ce qui est de html et css ce n'est qu'une petite partie du programme scolaire donc oui je fait beaucoup de copier coller. Je comprend rapidement à quoi sert le code et comment il est construit mais effectivement je n'arrive pas à l'intégrer comme je voudrais...

Discussions similaires

input signal out of range

Où est la touche SHIFT sur mon clavier d'ordi ?

Bouton ON OFF, O ou I ?

Quel est la touche shift sur le clavier

comment désactiver out of range

Votre réponse

Discussions similaires