Code Editor for app.py

import streamlit as st
import streamlit.components.v1 as components

st.title("Simple Form Example")

# Create the HTML form
html_form = """
<div style="padding: 15px; border-radius: 5px; border: 1px solid #ccc;">
    <div style="margin-bottom: 10px;">
        <label for="name" style="display: block; margin-bottom: 5px;">Name:</label>
        <input type="text" id="name" style="width: 100%; padding: 5px;">
    </div>
    <div style="margin-bottom: 10px;">
        <label for="age" style="display: block; margin-bottom: 5px;">Age:</label>
        <input type="number" id="age" style="width: 100%; padding: 5px;">
    </div>
    <button onclick="submitForm()" style="background-color: #0066cc; color: white; padding: 8px 15px; border: none; border-radius: 3px; cursor: pointer;">
        Submit
    </button>
</div>

<div id="result" style="margin-top: 20px;"></div>

<script>
function submitForm() {
    const name = document.getElementById('name').value;
    const age = document.getElementById('age').value;
    
    if (name && age) {
        document.getElementById('result').innerHTML = `
            <div style="padding: 10px; background-color: #f0f0f0; border-radius: 5px;">
                <p><strong>Name:</strong> ${name}</p>
                <p><strong>Age:</strong> ${age}</p>
            </div>
        `;
    } else {
        document.getElementById('result').innerHTML = `
            <div style="padding: 10px; background-color: #ffebee; border-radius: 5px; color: #c62828;">
                Please fill in all fields.
            </div>
        `;
    }
}
</script>
"""

# Display the form using components.html
components.html(html_form, height=400)