Use tables for form labels

3 files changed, 55 insertions, 30 deletions

diff --git a/src/components/mod.rs b/src/components/mod.rs
index 9ef867b..fe83441 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -346,6 +346,7 @@ pub fn MaybeFillInput<'a, M: GetIndex<&'a str, serde_json::Value>>(
     r#type: &'a str,
     name: &'a str,
     required: bool,
+    id: &'a str,
 ) {
     let value = maybe_fill_value(values, name, None);
     if required {
@@ -354,6 +355,7 @@ pub fn MaybeFillInput<'a, M: GetIndex<&'a str, serde_json::Value>>(
                 r#type
                 name
                 value
+                id
                 required={""}
             />
         }
@@ -363,6 +365,7 @@ pub fn MaybeFillInput<'a, M: GetIndex<&'a str, serde_json::Value>>(
                 r#type
                 name
                 value
+                id
             />
         }
     }
diff --git a/src/routes/communities.rs b/src/routes/communities.rs
index 743cd3d..41c4be8 100644
--- a/src/routes/communities.rs
+++ b/src/routes/communities.rs
@@ -413,23 +413,29 @@ async fn page_community_new_post_inner(
                 })
             }
             <form method={"POST"} action={&submit_url}>
-                <div>
-                    <label>
-                        {"Title: "}<MaybeFillInput values={&prev_values} r#type={"text"} name={"title"} required={true} />
-                    </label>
-                </div>
-                <div>
-                    <label>
-                        {"URL: "}<MaybeFillInput values={&prev_values} r#type={"text"} name={"href"} required={false} />
-                    </label>
-                </div>
-                <div>
-                    <label>
-                        {"Text:"}
-                        <br />
-                        <MaybeFillTextArea values={&prev_values} name={"content_markdown"} default_value={None} />
-                    </label>
-                </div>
+                <table>
+                    <tr>
+                        <td>
+                            <label for={"input_title"}>{"Title:"}</label>
+                        </td>
+                        <td>
+                            <MaybeFillInput values={&prev_values} r#type={"text"} name={"title"} required={true} id={"input_title"} />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for={"input_url"}>{"URL:"}</label>
+                        </td>
+                        <td>
+                            <MaybeFillInput values={&prev_values} r#type={"text"} name={"href"} required={true} id={"input_url"} />
+                        </td>
+                    </tr>
+                </table>
+                <label>
+                    {"Text:"}
+                    <br />
+                    <MaybeFillTextArea values={&prev_values} name={"content_markdown"} default_value={None} />
+                </label>
                 <div>
                     <button r#type={"submit"}>{"Submit"}</button>
                 </div>
diff --git a/src/routes/mod.rs b/src/routes/mod.rs
index 4d2daf6..5084e50 100644
--- a/src/routes/mod.rs
+++ b/src/routes/mod.rs
@@ -524,12 +524,20 @@ async fn page_login_inner(
                 })
             }
             <form method={"POST"} action={"/login/submit"}>
-                <p>
-                    <MaybeFillInput values={&prev_values} r#type={"text"} name={"username"} required={true} />
-                </p>
-                <p>
-                    <MaybeFillInput values={&prev_values} r#type={"password"} name={"password"} required={true} />
-                </p>
+                <table>
+                    <tr>
+                        <td><label for={"input_username"}>{"Username:"}</label></td>
+                        <td>
+                            <MaybeFillInput values={&prev_values} r#type={"text"} name={"username"} required={true} id={"input_username"} />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td><label for={"input_password"}>{"Password:"}</label></td>
+                        <td>
+                            <MaybeFillInput values={&prev_values} r#type={"password"} name={"password"} required={true} id={"input_password"} />
+                        </td>
+                    </tr>
+                </table>
                 <button r#type={"submit"}>{"Login"}</button>
             </form>
             <p>
@@ -718,7 +726,7 @@ async fn page_new_community_inner(
             <form method={"POST"} action={"/new_community/submit"}>
                 <div>
                     <label>
-                        {"Name: "}<MaybeFillInput values={&prev_values} r#type={"text"} name={"name"} required={true} />
+                        {"Name: "}<MaybeFillInput values={&prev_values} r#type={"text"} name={"name"} required={true} id={"input_name"} />
                     </label>
                 </div>
                 <div>
@@ -812,12 +820,20 @@ async fn page_signup_inner(
                 })
             }
             <form method={"POST"} action={"/signup/submit"}>
-                <p>
-                    <MaybeFillInput values={&prev_values} r#type={"text"} name={"username"} required={true} />
-                </p>
-                <p>
-                    <MaybeFillInput values={&prev_values} r#type={"password"} name={"password"} required={true} />
-                </p>
+                <table>
+                    <tr>
+                        <td><label for={"input_username"}>{"Username:"}</label></td>
+                        <td>
+                            <MaybeFillInput values={&prev_values} r#type={"text"} name={"username"} required={true} id={"input_username"} />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td><label for={"input_password"}>{"Password:"}</label></td>
+                        <td>
+                            <MaybeFillInput values={&prev_values} r#type={"password"} name={"password"} required={true} id={"input_password"} />
+                        </td>
+                    </tr>
+                </table>
                 <button r#type={"submit"}>{"Register"}</button>
             </form>
         </HTPage>