Fix form labels

mutalyzer/website/templates/batch-jobs.html

@@ -28,8 +28,8 @@
     </div>
 
     <div id="assembly_name_or_alias" style="display:none" class="form-group">
-      <label>Assembly</label>
-      <select name="assembly_name_or_alias" class="form-control">
+      <label for="assembly_name_or_alias">Assembly</label>
+      <select name="assembly_name_or_alias" id="assembly_name_or_alias" class="form-control">
         {% for assembly in assemblies %}
           <option value="{{ assembly.name }}"{% if assembly_name_or_alias in (assembly.name, assembly.alias) %} selected="selected"{% endif %}>{{ assembly.taxonomy_common_name }} &mdash; {{ assembly.name }}{% if assembly.alias %} ({{ assembly.alias }}){% endif %}</option>
         {% endfor %}
@@ -38,12 +38,12 @@
 
     <div class="form-group">
       <label for="email">Email address</label>
-      <input name="email" type="email" class="form-control" placeholder="Email address (notification will be sent here)" required value="{{ email }}">
+      <input name="email" id="email" type="email" class="form-control" placeholder="Email address (notification will be sent here)" required value="{{ email }}">
     </div>
 
     <div class="form-group">
       <label for="file">File</label>
-      <input type="file" name="file">
+      <input type="file" name="file" id="file">
     </div>
   </div>
 

mutalyzer/website/templates/description-extractor.html

@@ -32,12 +32,12 @@ Please supply a reference sequence and an observed sequence.
 <form action="{{ url_for('.description_extractor') }}" method="get" class="form">
   <div class="form-group">
     <label for="reference_sequence">Reference sequence</label>
-    <input type="text" name="reference_sequence" value="{{ reference_sequence }}" class="form-control form-pre example-target" placeholder="Reference sequence">
+    <input type="text" name="reference_sequence" id="reference_sequence" value="{{ reference_sequence }}" class="form-control form-pre example-target" placeholder="Reference sequence">
     <p>Example: <code class="example-input">ATGATGATCAGATACAGTGTGATACAGGTAGTTAGACAA</code></p>
   </div>
   <div class="form-group">
     <label for="variant_sequence">Observed sequence</label>
-    <input type="text" name="variant_sequence" value="{{ variant_sequence }}" class="form-control form-pre example-target-2" placeholder="Observed sequence">
+    <input type="text" name="variant_sequence" id="variant_sequence" value="{{ variant_sequence }}" class="form-control form-pre example-target-2" placeholder="Observed sequence">
     <p>Example: <code class="example-input-2">ATGATTTGATCAGATACATGTGATACCGGTAGTTAGGACAA</code></p>
   </div>
   <div class="form-group">

mutalyzer/website/templates/name-checker.html

@@ -52,7 +52,7 @@
     <div class="form-group">
       <label for="description">Variant description</label>
       <input class="form-control form-pre example-target" type="text"
-             name="description" id="hgvs" value="{{ description }}"
+             name="description" id="description" value="{{ description }}"
              placeholder="Variant description using HGVS format">
       <p>Example: <code class="example-input">AB026906.1:c.274G&gt;T</code></p>
     </div>

mutalyzer/website/templates/name-generator.html

@@ -16,16 +16,16 @@
 
         <h4>Reference</h4>
         <div class="form-group">
-            <label for="refe" class="col-sm-2 control-label">Reference sequence</label>
+            <label for="control-refe" class="col-sm-2 control-label">Reference sequence</label>
             <div class="col-sm-10">
-                <input type="text" name="refe" value=""class="form-control" placeholder="Reference" >
+                <input type="text" name="refe" id="control-refe" value=""class="form-control" placeholder="Reference" >
             </div>
         </div>
 
         <div class="form-group">
-            <label for="seqT" class="col-sm-2 control-label">Sequence type</label>
+            <label for="control-seqT" class="col-sm-2 control-label">Sequence type</label>
             <div class="col-sm-10">
-                <select name="seqT" class="form-control">
+                <select name="seqT" id="control-seqT" class="form-control">
                     <option value="g">Genomic</option>
                     <option value="c" selected="1">Coding DNA</option>
                     <option value="n">NonCoding DNA</option>
@@ -50,16 +50,16 @@
         </div>
 
             <div id="gSym" class="form-group">
-                <label for="gSym" class="col-sm-2 control-label">Gene symbol</label>
+                <label for="control-gSym" class="col-sm-2 control-label">Gene symbol</label>
                 <div class="col-sm-10">
-                    <input type="text" name="gSym" size="20" value=""class="form-control" placeholder="Gene symbol">
+                    <input type="text" name="gSym" id="control-gSym" size="20" value=""class="form-control" placeholder="Gene symbol">
                 </div>
             </div>
 
             <div id="tVar" class="form-group">
-                <label for="tVar" class="col-sm-2 control-label">Transcript</label>
+                <label for="control-tVar" class="col-sm-2 control-label">Transcript</label>
                 <div class="col-sm-10">
-                    <input type="text" name="tVar" size="20" value="" class="form-control" placeholder="Transcript">
+                    <input type="text" name="tVar" id="control-tVar" size="20" value="" class="form-control" placeholder="Transcript">
                 </div>
             </div>
 
@@ -85,8 +85,8 @@
     <div id="varianttemplate" style="display: none">
         <div class="row form-horizontal-inline">
             <div class="form-group col-md-6" id="V{NMBR}mutTrow">
-                <label for="V{NMBR}mutT"  id="V{NMBR}mutTname">Variant type</label>
-                <select name="V{NMBR}mutT" onchange="update();"class="form-control input-sm" >
+                <label for="control-V{NMBR}mutT" id="V{NMBR}mutTname">Variant type</label>
+                <select name="V{NMBR}mutT" id="control-V{NMBR}mutT" onchange="update();"class="form-control input-sm" >
                 <option value="1">Substitution</option>
                 <option value="2">Deletion</option>
                 <option value="3">Insertion</option>
@@ -98,30 +98,30 @@
             </div>
 
             <div class="form-group col-md-6" id="V{NMBR}P1row">
-                <label id="V{NMBR}P1name">Start position</label>
-                <input type="text" name="V{NMBR}P1" value="" class="form-control input-sm">
+                <label for="control-V{NMBR}P1name" id="V{NMBR}P1name">Start position</label>
+                <input type="text" name="V{NMBR}P1" id="control-V{NMBR}P1name" value="" class="form-control input-sm">
                 <div class="text-danger small" id="V{NMBR}P1error"></div>
             </div>
 
             <div class="form-group col-md-6" id="V{NMBR}P2row">
-                <label id="V{NMBR}P2name">End position</label>
-                <input type="text" name="V{NMBR}P2" size="20" value="" class="form-control input-sm" >
+                <label for="control-V{NMBR}P2name" id="V{NMBR}P2name">End position</label>
+                <input type="text" name="V{NMBR}P2" id="control-V{NMBR}P2name" size="20" value="" class="form-control input-sm" >
                 <div class="text-danger small" id="V{NMBR}P2error"></div>
             </div>
         </div>
         <div class="row form-horizontal-inline">
             <div class="col-md-6" id="V{NMBR}S1row">
               <div class="form-group" name="S1">
-                  <label id="V{NMBR}S1name">Old sequence</label>
-                  <input type="text" name="V{NMBR}S1" size="20" value=""class="form-control input-sm">
+                  <label for="control-V{NMBR}S1name" id="V{NMBR}S1name">Old sequence</label>
+                  <input type="text" name="V{NMBR}S1" id="control-V{NMBR}S1name" size="20" value=""class="form-control input-sm">
                   <div class="text-danger small" id="V{NMBR}S1error"></div>
               </div>
             </div>
 
             <div class="col-md-6" id="V{NMBR}S2row">
               <div class="form-group" name="S2">
-                  <label id="V{NMBR}S2name">New sequence</label>
-                  <input type="text" name="V{NMBR}S2" size="20" value=""class="form-control input-sm">
+                  <label for="control-V{NMBR}S2name" id="V{NMBR}S2name">New sequence</label>
+                  <input type="text" name="V{NMBR}S2" id="control-V{NMBR}S2name" size="20" value=""class="form-control input-sm">
                 <div class="text-danger small" id="V{NMBR}S2error"></div>
               </div>
             </div>

mutalyzer/website/templates/position-converter.html

@@ -19,7 +19,7 @@ normalize it to HGVS. Use the <a href="{{ url_for('.name_checker') }}">Name Chec
 <form class="form" role="form" action="{{ url_for('.position_converter') }}" method="get" enctype="multipart/form-data">
   <div class="form-group">
     <label for="assembly_name_or_alias">Build</label>
-    <select name="assembly_name_or_alias" class="form-control">
+    <select name="assembly_name_or_alias" id="assembly_name_or_alias" class="form-control">
       {% for assembly in assemblies %}
         <option value="{{ assembly.name }}"{% if assembly_name_or_alias in (assembly.name, assembly.alias) %} selected="selected"{% endif %}>{{ assembly.taxonomy_common_name }} &mdash; {{ assembly.name }}{% if assembly.alias %} ({{ assembly.alias }}){% endif %}</option>
       {% endfor %}
@@ -27,7 +27,7 @@ normalize it to HGVS. Use the <a href="{{ url_for('.name_checker') }}">Name Chec
   </div>
   <div class="form-group">
     <label for="description">Variant description</label>
-    <input type="text" name="description" value="{{ description }}"
+    <input type="text" name="description" id="description" value="{{ description }}"
            class="form-control form-pre example-target" placeholder="Variant description using HGVS format">
     <p>Examples: <code class="example-input">NM_003002.3:c.274G&gt;T</code>, <code class="example-input">chr11:g.111959693G&gt;T</code> and <code class="example-input">NC_000011.9:g.111959693G&gt;T</code></p>
   </div>

mutalyzer/website/templates/reference-loader.html

@@ -66,13 +66,13 @@ sequence (maximum size is {{ max_file_size }} megabytes).
     <div class="col-md-6">
       <div class="form-group" id="upload_label">
         <label for="file">GenBank file</label>
-        <input type="file" name="file">
+        <input type="file" name="file" id="file">
         <p class="help-block">Please select the GenBank file in plain text format.</p>
       </div>
 
       <div class="form-group" id="url_label">
         <label for="url">GenBank file URL</label>
-        <input type="text" name="url" class="form-control">
+        <input type="text" name="url" id="url" class="form-control">
         <p class="help-block">Please enter the URL of the GenBank file in plain text (including http://).</p>
       </div>
 
@@ -85,35 +85,35 @@ sequence (maximum size is {{ max_file_size }} megabytes).
               Entrez</a> search engine and is therefore based on the current
             Entrez assembly for the given organism (GRCh38/hg38 for human).</p>
           <label for="genesymbol">Gene symbol</label>
-          <input type="text" name="genesymbol" class="form-control">
+          <input type="text" name="genesymbol" id="genesymbol" class="form-control">
         </div>
         <div class="form-group">
           <label for="organism">Organism name</label>
-          <input type="text" name="organism" class="form-control">
+          <input type="text" name="organism" id="organism" class="form-control">
         </div>
         <div class="form-group">
           <label for="upstream">Number of 5' flanking nucleotides</label>
-          <input type="text" name="upstream" value="5000" class="form-control">
+          <input type="text" name="upstream" id="upstream" value="5000" class="form-control">
         </div>
         <div class="form-group">
           <label for="downstream"><td>Number of 3' flanking nucleotides</label>
-          <input type="text" name="downstream" value="2000" class="form-control">
+          <input type="text" name="downstream" id="downstream" value="2000" class="form-control">
         </div>
       </div>
 
       <div id="slice_accession_label">
         <div class="form-group">
           <p class="help-block">Please enter the accession number of the chromosome or contig and specify the range.</p>
-          <label>Chromosome accession number</label>
-          <input type="text" name="accession" class="form-control">
+          <label for="accession">Chromosome accession number</label>
+          <input type="text" name="accession" id="accession" class="form-control">
         </div>
         <div class="form-group">
-          <label>Start position</label>
-          <input type="text" name="accession_start" class="form-control">
+          <label for="accession_start">Start position</label>
+          <input type="text" name="accession_start" id="accession_start" class="form-control">
         </div>
         <div class="form-group">
-          <label>Stop position</label>
-          <input type="text" name="accession_stop" class="form-control">
+          <label for="accession_stop">Stop position</label>
+          <input type="text" name="accession_stop" id="accession_stop" class="form-control">
         </div>
         <div class="form-group">
           <label>Orientation</label>
@@ -126,7 +126,7 @@ sequence (maximum size is {{ max_file_size }} megabytes).
         <div class="form-group">
           <p class="help-block">Please enter the name of the chromosome and specify the range.</p>
           <label for="assembly_name_or_alias">Assembly</label>
-          <select name="assembly_name_or_alias" class="form-control">
+          <select name="assembly_name_or_alias" id="assembly_name_or_alias" class="form-control">
             {% for assembly in assemblies %}
               <option value="{{ assembly.name }}"{% if assembly_name_or_alias in (assembly.name, assembly.alias) %} selected="selected"{% endif %}>{{ assembly.taxonomy_common_name }} &mdash; {{ assembly.name }}{% if assembly.alias %} ({{assembly.alias }}){% endif %}</option>
             {% endfor %}
@@ -134,15 +134,15 @@ sequence (maximum size is {{ max_file_size }} megabytes).
         </div>
         <div class="form-group">
           <label for="chromosome">Chromosome name</label>
-          <input type="text" name="chromosome" class="form-control">
+          <input type="text" name="chromosome" id="chromosome" class="form-control">
         </div>
         <div class="form-group">
           <label for="chromosome_start">Start position</label>
-          <input type="text" name="chromosome_start" class="form-control">
+          <input type="text" name="chromosome_start" id="chromosome_start" class="form-control">
         </div>
         <div class="form-group">
           <label for="chromosome_stop">Stop position</label>
-          <input type="text" name="chromosome_stop" class="form-control">
+          <input type="text" name="chromosome_stop" id="chromosome_stop" class="form-control">
         </div>
         <div class="form-group">
           <label for="chromosome_orientation">Orientation</label>

mutalyzer/website/templates/snp-converter.html

@@ -16,7 +16,7 @@ the reference sequence(s) used by dbSNP.
   <div class="form-group">
     <label for="description">SNP</label>
     <input type="text" class="form-control form-pre example-target"
-    name="rs_id" placeholder="dbSNP rs number (including rs)" value="{{ rs_id }}" ></input>
+    name="rs_id" id="description" placeholder="dbSNP rs number (including rs)" value="{{ rs_id }}" ></input>
     <p>Example: <code class="example-input">rs9919552</code></p>
   </div>
 

mutalyzer/website/templates/syntax-checker.html

@@ -18,7 +18,7 @@ standard variant nomenclature">HGVS</a> format:
   <div class="form-group">
     <label for="description">Variant description</label>
     <input class="form-control form-pre example-target" type="text"
-           name="description" value="{{ description }}" placeholder="Variant description using HGVS format">
+           name="description" id="description" value="{{ description }}" placeholder="Variant description using HGVS format">
     <p>Example: <code class="example-input">AB026906.1:c.274G&gt;T</code></p>
   </div>
   <div class="form-group button-group">