5568 sujets

Sémantique web et HTML

Mettre une image à côté d'un formulaire

Bonjour,

Je suis plutôt débutant en HTML. Je souhaite mettre une image (plus particuliérement une image de pub ) à la verticale juste à côté de mon formulaire. Néanmoins je n'y arrive pas.
Ma question est comment faire. Quelqu'un peut-il m'aider ?

Voici le code : (La balise "h3" est celle de l'image en question. )


<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Yo</title>
      <meta charset="utf-8">
      <link rel="stylesheet" href="style%202.css">
</head>
</html>

<h3 id="object-position-1" href="ADRESSE DE MON SITE" target="_blank"><img src="https://i.goopics.net/xxKe2.jpg"
    border="0" alt="titre" style=" height: 400px; "/></h3>

<script src="https://cdn.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>
<script src="https://cdn.jotfor.ms/static/jotform.forms.js?3.3.25402" type="text/javascript"></script>
<script type="text/javascript">
	JotForm.init(function(){
if (window.JotForm && JotForm.accessible) $('input_18').setAttribute('tabindex',0);
      JotForm.description('input_18', 'yo');
if (window.JotForm && JotForm.accessible) $('input_16').setAttribute('tabindex',0);
      JotForm.setCustomHint( 'input_16', 'ecris ce que tu veux' );
      JotForm.description('input_16', 'dis pas n\'importe quoi ok');
      JotForm.shuffleOptions("20");
      JotForm.description('input_20', 'Choisis bien');
      JotForm.description('input_17', 'fais pas le relou<br />mets une bonne note');
	JotForm.newDefaultTheme = true;
	JotForm.extendsNewTheme = false;
	JotForm.newPaymentUIForNewCreatedForms = false;
	JotForm.newPaymentUI = true;
    /*INIT-END*/
	});
 JotForm.prepareCalculationsOnTheFly([null,null,null,null,null,null,null,null,null,null,{"name":"quelEst10","qid":"10","text":"Quel est ton reseau social prefere ?","type":"control_head"},null,null,null,null,null,{"description":"dis pas n'importe quoi ok","name":"message","qid":"16","subLabel":"","text":"Message","type":"control_textarea"},{"description":"fais pas le relou\nmets une bonne note","name":"commentTrouvestu","qid":"17","text":"Comment trouves-tu le site ?","type":"control_scale"},{"description":"yo","name":"pseudo","qid":"18","subLabel":"","text":"Pseudo","type":"control_textbox"},null,{"description":"Choisis bien","name":"alors","qid":"20","text":"Alors ?","type":"control_checkbox"}]);
 setTimeout(function() {
JotForm.paymentExtrasOnTheFly([null,null,null,null,null,null,null,null,null,null,{"name":"quelEst10","qid":"10","text":"Quel est ton reseau social prefere ?","type":"control_head"},null,null,null,null,null,{"description":"dis pas n'importe quoi ok","name":"message","qid":"16","subLabel":"","text":"Message","type":"control_textarea"},{"description":"fais pas le relou\nmets une bonne note","name":"commentTrouvestu","qid":"17","text":"Comment trouves-tu le site ?","type":"control_scale"},{"description":"yo","name":"pseudo","qid":"18","subLabel":"","text":"Pseudo","type":"control_textbox"},null,{"description":"Choisis bien","name":"alors","qid":"20","text":"Alors ?","type":"control_checkbox"}]);}, 20);
</script>
<link type="text/css" media="print" rel="stylesheet" href="https://cdn.jotfor.ms/css/printForm.css?3.3.25402" />
<link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/themes/CSS/5e6b428acc8c4e222d1beb91.css?themeRevisionID=5f7ed99c2c2c7240ba580251"/>
<link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/css/styles/payment/payment_styles.css?3.3.25402" />
<link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/css/styles/payment/payment_feature.css?3.3.25402" />
<style type="text/css" id="form-designer-style">
.form-label.form-label-auto {
      display: block;
      float: none;
      text-align: left;
      width: 100%;
      }
</style>

<form class="jotform-form" action="https://submit.jotformeu.com/submit/211312220622334/" method="post" name="form_211312220622334" id="211312220622334" accept-charset="utf-8" autocomplete="on">
  <input type="hidden" name="formID" value="211312220622334" />
  <input type="hidden" id="JWTContainer" value="" />
  <input type="hidden" id="cardinalOrderNumber" value="" />
  <div role="main" class="form-all">
    <ul class="form-section page-section">
      <li id="cid_10" class="form-input-wide" data-type="control_head">
        <div class="form-header-group  header-large">
          <div style="text-align: center;">
            <h1 id="header_10" class="form-header" data-component="header">
              Quel est ton réseau social préféré ?
            </h1>
          </div>
        </div>
      </li>
      <li class="form-line" data-type="control_textbox" id="id_18">
        <label class="form-label form-label-top form-label-auto" id="label_18" for="input_18"> Pseudo </label>
        <div id="cid_18" class="form-input-wide" data-layout="half">
          <input type="text" id="input_18" name="q18_pseudo" data-type="input-textbox" class="form-textbox" style="width:310px" size="310" value="" data-component="textbox" aria-labelledby="label_18" />
        </div>
      </li>
      <li class="form-line" data-type="control_textarea" id="id_16">
        <label class="form-label form-label-top form-label-auto" id="label_16" for="input_16"> Message </label>
        <div id="cid_16" class="form-input-wide" data-layout="full">
          <textarea id="input_16" class="form-textarea" name="q16_message" style="width:648px;height:163px" data-component="textarea" aria-labelledby="label_16"></textarea>
        </div>
      </li>
      <li class="form-line" data-type="control_checkbox" id="id_20">
        <label class="form-label form-label-top form-label-auto" id="label_20" for="input_20"> Alors ? </label>
        <div id="cid_20" class="form-input-wide" data-layout="full">
          <div class="form-multiple-column" data-columncount="2" role="group" aria-labelledby="label_20" data-component="checkbox">
            <span class="form-checkbox-item">
              <span class="dragger-item">
              </span>
              <input type="checkbox" class="form-checkbox" id="input_20_0" name="q20_alors[]" checked="" value="Insta" />
              <label id="label_input_20_0" for="input_20_0"> Insta </label>
            </span>
            <span class="form-checkbox-item">
              <span class="dragger-item">
              </span>
              <input type="checkbox" class="form-checkbox" id="input_20_1" name="q20_alors[]" checked="" value="Snap" />
              <label id="label_input_20_1" for="input_20_1"> Snap </label>
            </span>
            <span class="form-checkbox-item" style="clear:left">
              <span class="dragger-item">
              </span>
              <input type="checkbox" class="form-checkbox" id="input_20_2" name="q20_alors[]" checked="" value="Twiter" />
              <label id="label_input_20_2" for="input_20_2"> Twiter </label>
            </span>
            <span class="form-checkbox-item">
              <span class="dragger-item">
              </span>
              <input type="checkbox" class="form-checkbox" id="input_20_3" name="q20_alors[]" checked="" value="Facebook" />
              <label id="label_input_20_3" for="input_20_3"> Facebook </label>
            </span>
          </div>
        </div>
      </li>
      <li class="form-line" data-type="control_scale" id="id_17">
        <label class="form-label form-label-top" id="label_17" for="input_17"> Comment trouves-tu le site ? </label>
        <div id="cid_17" class="form-input-wide" data-layout="full">
          <span class="form-sub-label-container" style="vertical-align:top">
            <div role="radiogroup" aria-labelledby="label_17 sublabel_input_17_description" cellPadding="4" cellSpacing="0" class="form-scale-table" data-component="scale">
              <div class="rating-item-group">
                <div class="rating-item">
                  <span class="rating-item-title for-from">
                    <label for="input_17_worst" aria-hidden="true"> éclaté </label>
                  </span>
                  <input type="radio" class="form-radio" name="q17_commentTrouvestu" value="1" title="1" id="input_17_1" />
                  <label for="input_17_1"> 1 </label>
                </div>
                <div class="rating-item">
                  <input type="radio" class="form-radio" name="q17_commentTrouvestu" value="2" title="2" id="input_17_2" />
                  <label for="input_17_2"> 2 </label>
                </div>
                <div class="rating-item">
                  <input type="radio" class="form-radio" name="q17_commentTrouvestu" value="3" title="3" id="input_17_3" />
                  <label for="input_17_3"> 3 </label>
                </div>
                <div class="rating-item">
                  <input type="radio" class="form-radio" name="q17_commentTrouvestu" value="4" title="4" id="input_17_4" />
                  <label for="input_17_4"> 4 </label>
                </div>
                <div class="rating-item">
                  <span class="rating-item-title for-to">
                    <label for="input_17_best" aria-hidden="true"> t elon musk </label>
                  </span>
                  <input type="radio" class="form-radio" name="q17_commentTrouvestu" value="5" title="5" id="input_17_5" />
                  <label for="input_17_5"> 5 </label>
                </div>
              </div>
            </div>
            <label class="form-sub-label" id="sublabel_input_17_description" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap" aria-hidden="false"> 1 is éclaté, 5 is t elon musk </label>
          </span>
        </div>
      </li>

<div class="wrapper">
    <a class="button" href="site%20image.html">Envoyez le résultat</a>
</div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" version="1.1">
    <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo"  />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

    </ul>
  </div>
  <script>
  JotForm.showJotFormPowered = "new_footer";
  </script>
  <script>
  JotForm.poweredByText = "Powered by JotForm";
  </script>
  <input type="hidden" class="simple_spc" id="simple_spc" name="simple_spc" value="211312220622334" />
  <script type="text/javascript">
  var all_spc = document.querySelectorAll("form[id='211312220622334'] .si" + "mple" + "_spc");
for (var i = 0; i < all_spc.length; i++)
{
  all_spc[i].value = "211312220622334-211312220622334";
}

<script type="text/javascript">JotForm.forwardToEu=true;</script><script src="https://cdn.jotfor.ms//js/vendor/smoothscroll.min.js?v=3.3.25402"></script>





:root {
    --bg: #1a1e24;
    --color: silver;
    --font: Montserat, Roboto, Helvetica, Arial, sans-serif;
}

.wrapper {
    padding: 1.5rem 0;
    filter: url('#goo');
}

.button {
    display: inline-block;
    text-align: center;
    background: var(--color);
    color: var(--bg);
    font-weight: bold;
    padding: 1.18em 1.32em 1.03em;
    line-height: 1;
    border-radius: 1em;
    position: relative;
    min-width: 8.23em;
    text-decoration: none;
    font-family: var(--font);
    font-size: 1.25rem;
}

.button:before,
.button:after {
    width: 4.4em;
    height: 2.95em;
    position: absolute;
    content: "";
    display: inline-block;
    background: var(--color);
    border-radius: 50%;
    transition: transform 1s ease;
    transform: scale(0);
    z-index: -1;
}

.button:before {
    top: -25%;
    left: 20%;
}

.button:after {
    bottom: -25%;
    right: 20%;
}

.button:hover:before,
.button:hover:after {
    transform: none;
}

h2 {
  position: center;

}

h3 {
  position: -webkit-sticky;
  position: static;
  bottom: 100px;
}

Modifié par ikiou (17 May 2021 - 14:47)
Sujet clos
Aller à