Syntax error with input type="radio"

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
JoyeuxDrille
Jr. Propeller Head
Posts: 2
Joined: Tue Jan 19, 2021 9:29 am

Syntax error with input type="radio"

Post by JoyeuxDrille »

Hello,

I'm trying to piece together a proof of concept to publish HTML forms using Flare.

Here's code taken from the Text Editor.

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
    <head>
        <link href="../Resources/TableStyles/Alternate-Row-Color.css" rel="stylesheet" MadCap:stylesheetType="table" />
    </head>
    <body>
        <h1>Titre de premier niveau</h1>
        <h2>Titre de deuxième niveau</h2>
        <h3>Titre de troisième niveau</h3>
        <p>Paragraphe</p>
        <table style="width: 100%;mc-table-style: url('../Resources/TableStyles/Alternate-Row-Color.css');" class="TableStyle-Alternate-Row-Color" cellspacing="21">
            <col class="TableStyle-Alternate-Row-Color-Column-Column1" />
            <col class="TableStyle-Alternate-Row-Color-Column-Column1" />
            <col class="TableStyle-Alternate-Row-Color-Column-Column1" />
            <tbody>
                <tr class="TableStyle-Alternate-Row-Color-Body-Body1">
                    <th class="TableStyle-Alternate-Row-Color-BodyE-Column1-Body1">Description</th>
                    <th class="TableStyle-Alternate-Row-Color-BodyE-Column1-Body1">Début</th>
                    <th class="TableStyle-Alternate-Row-Color-BodyD-Column1-Body1">Fin</th>
                </tr>
                <tr class="TableStyle-Alternate-Row-Color-Body-Body2">
                    <td class="TableStyle-Alternate-Row-Color-BodyE-Column1-Body2">Première cellule remplie avec du texte descriptif</td>
                    <td class="TableStyle-Alternate-Row-Color-BodyE-Column1-Body2"> </td>
                    <td class="TableStyle-Alternate-Row-Color-BodyD-Column1-Body2"> </td>
                </tr>
                <tr class="TableStyle-Alternate-Row-Color-Body-Body1">
                    <td class="TableStyle-Alternate-Row-Color-BodyE-Column1-Body1">
                        <p>Exemple de réponse avec boutons radio</p>
                        <p> </p>
                    </td>
                    <td class="TableStyle-Alternate-Row-Color-BodyE-Column1-Body1">
                        <p>Exemple de liste déroulante avec choix sélectionnables.</p>
                        <p> </p>
                        <label class="Deroulante" for="Deroulante">Sélectionnez un choix</label>
                        <select name="Deroulante" id="SelectChoix">
                            <option value="Lib1">Libellé 1</option>
                            <option value="Lib2">Libellé 2</option>
                            <option value="mercedes">Mercedes</option>
                            <option value="audi">Audi</option>
                        </select>
                    </td>
                    <td class="TableStyle-Alternate-Row-Color-BodyD-Column1-Body1"> </td>
                </tr>
                <tr class="TableStyle-Alternate-Row-Color-Body-Body2">
                    <td class="TableStyle-Alternate-Row-Color-BodyB-Column1-Body2">
                        <p>Quelques termes définis par la fonction "Glossary".</p>
                        <p class="table-text">Voici un terme que je veux définir : <MadCap:glossaryTerm glossTerm="Lexique.Term1" class="Popup">banane</MadCap:glossaryTerm> (sélecteur sans classe)</p>
                        <p>Et maintenant, voici le terme <MadCap:glossaryTerm glossTerm="Lexique.Term2" class="Expanding">joey</MadCap:glossaryTerm>, consultable par lien (sélecteur class=expanding)</p>
                        <p>Et maintenant, voici le terme <MadCap:glossaryTerm glossTerm="Lexique.Term2" class="Hyperlink">joey</MadCap:glossaryTerm>, consultable par lien (sélecteur class=hyperlink)</p>
                        <p>Et maintenant, voici le terme <MadCap:glossaryTerm glossTerm="Lexique.Term2" class="Popup">joey</MadCap:glossaryTerm>, consultable par lien (sélecteur class=popup). Cette classe s'affiche de manière identique à la classe "hyperlink", car le présent projet a un skin "TopNavigation". La classe s'afficherait vraiment comme pop-up dans les autres types de skins (ex. "SideNavigation").</p>
                        <p>On peut également renvoyer vers une <MadCap:glossaryTerm glossTerm="Lexique.Term3">autre rubrique</MadCap:glossaryTerm>, au lieu d'inscrire simplement une définition dans le corps du texte.</p>
                    </td>
                    <td class="TableStyle-Alternate-Row-Color-BodyB-Column1-Body2">
                        <p class="table-text"> </p>
                    </td>
                    <td class="TableStyle-Alternate-Row-Color-BodyA-Column1-Body2">
                        <p class="table-text"> </p>
                    </td>
                </tr>
            </tbody>
        </table>
        <p> </p>
<form action="/action_page.php">
			<p>Please select your gender:</p>
			<input type="radio" id="male" name="gender" value="male">
				<label for="male">Male</label><br>
					<input type="radio" id="female" name="gender" value="female">
						<label for="female">Female</label><br>
							<input type="radio" id="other" name="gender" value="other">
								<label for="other">Other</label>
								</form>
    </body>
</html>
Now, here's my problem: an error message gets displayed at the top of the Text Editor window. It goes as follows:
"Warning: Invalid syntax on or inside " tag located on line 71.
In my code, "line 71" is

Code: Select all

</form>
.

I took this <form></form> bit of code from https://www.w3schools.com/tags/att_input_type_radio.asp, and I tested it using some online HTML code checker. It runs fine there, and displays radio buttons and their labels as intended, but Flare just won't do it. I even tried troubleshooting with a (junior) webdev, but he can't tell what's wrong exactly.

Any help appreciated!

Louis
robdocsmith
Sr. Propeller Head
Posts: 247
Joined: Thu May 24, 2018 3:11 pm
Location: Queensland, Australia

Re: Syntax error with input type="radio"

Post by robdocsmith »

Bonjour Louis,

The issue isn't the form, it's that you have tags that aren't complete. In flare input tags and br tags need to have a closing forward slash "/>" if they don't have an explicit closing tag "</input>"
The below works:

Code: Select all

<form action="./action_page.php">
<p>Please select your gender:</p>
<input type="radio" id="male" name="gender" value="male" />
<label for="male">Male</label><br />
<input type="radio" id="female" name="gender" value="female" />
<label for="female">Female</label><br />
<input type="radio" id="other" name="gender" value="other" />
<label for="other">Other</label>
</form>
Cheers,

Rob
JoyeuxDrille
Jr. Propeller Head
Posts: 2
Joined: Tue Jan 19, 2021 9:29 am

Re: Syntax error with input type="radio"

Post by JoyeuxDrille »

Thanks Rob, that was absolutely right. I had solved my problem yesterday after talking with Support, but could not update my answer as my Forum account had been deactivated. Very nice of you to lend a hand like that.
Post Reply