How to get value from html?

Using Streamlit
1

Hello!

I would like to integrate my periodic table created by html and Streamlit.

First, I introduce my periodic table as following, the function of this is to display clicked elements.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Material Database</title>
    <style>
        * {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: 600;
        }

        td {
            width: 5vw;
            /*border: 1px solid gray;*/
            text-align: center;
        }

        .noBorder {
            border: none;
        }

        .headingOne {
            color: white;
            background-color: blue;
            padding: 5px;
            font-size: 5vw;
        }

        ._color_1 {
            background-color: #ff9966;
        }

        .color_2 {
            background-color: #dda0dd;
        }

        .color_3 {
            background-color: #90c7ff;
        }

        .color_4 {
            background-color: #fceff0;
        }

        .color_5 {
            background-color: #fff28e;
        }

        .color_6 {
            background-color: #c79810;
        }

        .color_7 {
            background-color: #cdeb8b;
        }

        .color_8 {
            background-color: #ebdca9;
        }

        .color_9 {
            background-color: #e6e6fa;
        }

        ._button {
            font-size: 1.5em;
            width: 58px;
            height: 70px;
            padding: 4px 6px;
            font-weight: bold;
        }

        .text_color_green {
            color: green;
        }

        .text_color_blue {
            color: blue;
        }

        .text_color_red {
            color: red;
        }
    </style>

    <script type="text/javascript"><!--
        function addTF(str)
        {
            document.compoundForm.compound.value += str;
        }
    // --></script>
</head>

<body>
    <center>
        <!--<h1 class="headingOne">Material Database</h1>-->
        <!--<h2>Select the component elements in the periodic table below.</h2>-->
        <table>
            <tr>
                <td><button class="_color_1 _button text_color_green" value="H" onClick="addTF(this.value)">1<br/>H</button></td>
                <td class="noBorder" colspan="16"></td>
                <td><button class="color_9 _button text_color_green" value="He" onClick="addTF(this.value)">2<br/>He</button></td>
            </tr>
            <tr>
                <td><button class="color_2 _button" value="Li" onClick="addTF(this.value)">3<br/>Li</button></td>
                <td><button class="color_3 _button" value="Be" onClick="addTF(this.value)">4<br/>Be</button></td>
                <td class="noBorder" colspan="10"></td>
                <td><button class="color_6 _button" value="B" onClick="addTF(this.value)">5<br/>B</button></td>
                <td><button class="_color_1 _button" value="C" onClick="addTF(this.value)">6<br/>C</button></td>
                <td><button class="_color_1 _button text_color_green" value="N" onClick="addTF(this.value)">7<br/>N</button></td>
                <td><button class="_color_1 _button text_color_green" value="O" onClick="addTF(this.value)">8<br/>O</button></td>
                <td><button class="color_8 _button text_color_green" value="F" onClick="addTF(this.value)">9<br/>F</button></td>
                <td><button class="color_9 _button text_color_green" value="Ne" onClick="addTF(this.value)">10<br/>Ne</button></td>
            </tr>
            <tr>
                <td><button class="color_2 _button" value="Na" onClick="addTF(this.value)">11<br/>Na</button></td>
                <td><button class="color_3 _button" value="Mg" onClick="addTF(this.value)">12<br/>Mg</button></td>
                <td class="noBorder" colspan="10"></td>
                <td><button class="color_7 _button" value="Al" onClick="addTF(this.value)">13<br/>Al</button></td>
                <td><button class="color_6 _button" value="Si" onClick="addTF(this.value)">14<br/>Si</button></td>
                <td><button class="_color_1 _button" value="P" onClick="addTF(this.value)">15<br/>P</button></td>
                <td><button class="_color_1 _button" value="S" onClick="addTF(this.value)">16<br/>S</button></td>
                <td><button class="color_8 _button text_color_green" value="Cl" onClick="addTF(this.value)">17<br/>Cl</button></td>
                <td><button class="color_9 _button text_color_green" value="Ar" onClick="addTF(this.value)">18<br/>Ar</button></td>
            </tr>
            <tr>
                <td><button class="color_2 _button" value="K" onClick="addTF(this.value)">19<br/>K</button></td>
                <td><button class="color_3 _button" value="Ca" onClick="addTF(this.value)">20<br/>Ca</button></td>
                <td><button class="color_5 _button" value="Sc" onClick="addTF(this.value)">21<br/>Sc</button></td>
                <td><button class="color_5 _button" value="Ti" onClick="addTF(this.value)">22<br/>Ti</button></td>
                <td><button class="color_5 _button" value="V" onClick="addTF(this.value)">23<br/>V</button></td>
                <td><button class="color_5 _button" value="Cr" onClick="addTF(this.value)">24<br/>Cr</button></td>
                <td><button class="color_5 _button" value="Mn" onClick="addTF(this.value)">25<br/>Mn</button></td>
                <td><button class="color_5 _button" value="Fe" onClick="addTF(this.value)">26<br/>Fe</button></td>
                <td><button class="color_5 _button" value="Co" onClick="addTF(this.value)">27<br/>Co</button></td>
                <td><button class="color_5 _button" value="Ni" onClick="addTF(this.value)">28<br/>Ni</button></td>
                <td><button class="color_5 _button" value="Cu" onClick="addTF(this.value)">29<br/>Cu</button></td>
                <td><button class="color_5 _button" value="Zn" onClick="addTF(this.value)">30<br/>Zn</button></td>
                <td><button class="color_7 _button text_color_blue" value="Ga" onClick="addTF(this.value)">31<br/>Ga</button></td>
                <td><button class="color_6 _button" value="Ge" onClick="addTF(this.value)">32<br/>Ge</button></td>
                <td><button class="color_6 _button" value="As" onClick="addTF(this.value)">33<br/>As</button></td>
                <td><button class="_color_1 _button" value="Se" onClick="addTF(this.value)">34<br/>Se</button></td>
                <td><button class="color_8 _button text_color_blue" value="Br" onClick="addTF(this.value)">35<br/>Br</button></td>
                <td><button class="color_9 _button text_color_green" value="Kr" onClick="addTF(this.value)">36<br/>Kr</button></td>
            </tr>
            <tr>
                <td><button class="color_2 _button" value="Kr" onClick="addTF(this.value)">37<br/>Rb</button></td>
                <td><button class="color_3 _button" value="Sr" onClick="addTF(this.value)">38<br/>Sr</button></td>
                <td><button class="color_5 _button" value="Y" onClick="addTF(this.value)">39<br/>Y</button></td>
                <td><button class="color_5 _button" value="Zr" onClick="addTF(this.value)">40<br/>Zr</button></td>
                <td><button class="color_5 _button" value="Nb" onClick="addTF(this.value)">41<br/>Nb</button></td>
                <td><button class="color_5 _button" value="Mo" onClick="addTF(this.value)">42<br/>Mo</button></td>
                <td><button class="color_5 _button" value="Tc" onClick="addTF(this.value)">43<br/>Tc</button></td>
                <td><button class="color_5 _button" value="Ru" onClick="addTF(this.value)">44<br/>Ru</button></td>
                <td><button class="color_5 _button" value="Rh" onClick="addTF(this.value)">45<br/>Rh</button></td>
                <td><button class="color_5 _button" value="Pd" onClick="addTF(this.value)">46<br/>Pd</button></td>
                <td><button class="color_5 _button" value="Ag" onClick="addTF(this.value)">47<br/>Ag</button></td>
                <td><button class="color_5 _button" value="Ag" onClick="addTF(this.value)">48<br/>Cd</button></td>
                <td><button class="color_7 _button" value="In" onClick="addTF(this.value)">49<br/>In</button></td>
                <td><button class="color_7 _button" value="Sn" onClick="addTF(this.value)">50<br/>Sn</button></td>
                <td><button class="color_6 _button" value="Sb" onClick="addTF(this.value)">51<br/>Sb</button></td>
                <td><button class="color_6 _button" value="Te" onClick="addTF(this.value)">52<br/>Te</button></td>
                <td><button class="color_8 _button" value="I" onClick="addTF(this.value)">53<br/>I</button></td>
                <td><button class="color_9 _button text_color_green" value="Xe" onClick="addTF(this.value)">54<br/>Xe</button></td>
            </tr>
            <tr>
                <td><button class="color_2 _button text_color_blue" value="Cs" onClick="addTF(this.value)">55<br/>Cs</button></td>
                <td><button class="color_3 _button text_color_blue" value="Ba" onClick="addTF(this.value)">56<br/>Ba</button></td>
                <td><button class="color_4 _button">57-71<br />&nbsp;</button></td>
                <td><button class="color_5 _button" value="Hf" onClick="addTF(this.value)">72<br/>Hf</button></td>
                <td><button class="color_5 _button" value="Ta" onClick="addTF(this.value)">73<br/>Ta</button></td>
                <td><button class="color_5 _button" value="W" onClick="addTF(this.value)">74<br/>W</button></td>
                <td><button class="color_5 _button" value="Re" onClick="addTF(this.value)">75<br/>Re</button></td>
                <td><button class="color_5 _button" value="Os" onClick="addTF(this.value)">76<br/>Os</button></td>
                <td><button class="color_5 _button" value="Ir" onClick="addTF(this.value)">77<br/>Ir</button></td>
                <td><button class="color_5 _button" value="Pt" onClick="addTF(this.value)">78<br/>Pt</button></td>
                <td><button class="color_5 _button" value="Au" onClick="addTF(this.value)">79<br/>Au</button></td>
                <td><button class="color_5 _button text_color_blue" value="Hg" onClick="addTF(this.value)">80<br/>Hg</button></td>
                <td><button class="color_7 _button" value="Tl" onClick="addTF(this.value)">81<br/>Tl</button></td>
                <td><button class="color_7 _button" value="Pb" onClick="addTF(this.value)">82<br/>Pb</button></td>
                <td><button class="color_7 _button" value="Bi" onClick="addTF(this.value)">83<br/>Bi</button></td>
                <td><button class="color_6 _button" value="Po" onClick="addTF(this.value)">84<br/>Po</button></td>
                <td><button class="color_8 _button" value="At" onClick="addTF(this.value)">85<br/>At</button></td>
                <td><button class="color_9 _button text_color_green" value="Rn" onClick="addTF(this.value)">86<br/>Rn</button></td>
            </tr>
            <tr>
                <td><button class="color_2 _button text_color_blue" value="Fr" onClick="addTF(this.value)">87<br/>Fr</button></td>
                <td><button class="color_3 _button" value="Ra" onClick="addTF(this.value)">88<br/>Ra</button></td>
                <td><button class="color_4 _button" value="Ra" onClick="addTF(this.value)">89-103<br />&nbsp;</button></td>
                <td><button class="color_5 _button text_color_red" value="Rf" onClick="addTF(this.value)">104<br/>Rf</button></td>
                <td><button class="color_5 _button text_color_red" value="Db" onClick="addTF(this.value)">105<br/>Db</button></td>
                <td><button class="color_5 _button text_color_red" value="Sg" onClick="addTF(this.value)">106<br/>Sg</button></td>
                <td><button class="color_5 _button text_color_red" value="Bh" onClick="addTF(this.value)">107<br/>Bh</button></td>
                <td><button class="color_5 _button text_color_red" value="Hs" onClick="addTF(this.value)">108<br/>Hs</button></td>
                <td><button class="color_5 _button text_color_red" value="Mt" onClick="addTF(this.value)">109<br/>Mt</button></td>
                <td><button class="color_5 _button text_color_red" value="Ds" onClick="addTF(this.value)">110<br/>Ds</button></td>
                <td><button class="color_5 _button text_color_red" value="Rg" onClick="addTF(this.value)">111<br/>Rg</button></td>
                <td><button class="color_5 _button text_color_red" value="Cn" onClick="addTF(this.value)">112<br/>Cn</button></td>
                <td><button class="color_5 _button text_color_red" value="Nh" onClick="addTF(this.value)">113<br/>Nh</button></td>
                <td><button class="color_5 _button text_color_red" value="Fl" onClick="addTF(this.value)">114<br/>Fl</button></td>
                <td><button class="color_4 _button text_color_red" value="Mc" onClick="addTF(this.value)">115<br/>Mc</button></td>
                <td><button class="color_4 _button text_color_red" value="Lv" onClick="addTF(this.value)">116<br/>Lv</button></td>
                <td><button class="color_4 _button text_color_red" value="Ts" onClick="addTF(this.value)">117<br/>Ts</button></td>
                <td><button class="color_4 _button text_color_red" value="Og" onClick="addTF(this.value)">118<br/>Og</button></td>
            </tr>
            <tr>
                <td class="noBorder"></td>
            </tr>
            <tr>
                <td class="noBorder" colspan="2" rowspan="2"></td>
                <td><button class="color_4 _button" value="La" onClick="addTF(this.value)">57<br/>La</button></td>
                <td><button class="color_4 _button" value="Ce" onClick="addTF(this.value)">58<br/>Ce</button></td>
                <td><button class="color_4 _button" value="Pr" onClick="addTF(this.value)">59<br/>Pr</button></td>
                <td><button class="color_4 _button" value="Nd" onClick="addTF(this.value)">60<br/>Nd</button></td>
                <td><button class="color_4 _button text_color_red" value="Pm" onClick="addTF(this.value)">61<br/>Pm</button></td>
                <td><button class="color_4 _button" value="Sm" onClick="addTF(this.value)">62<br/>Sm</button></td>
                <td><button class="color_4 _button" value="Eu" onClick="addTF(this.value)">63<br/>Eu</button></td>
                <td><button class="color_4 _button" value="Gd" onClick="addTF(this.value)">64<br/>Gd</button></td>
                <td><button class="color_4 _button" value="Tb" onClick="addTF(this.value)">65<br/>Tb</button></td>
                <td><button class="color_4 _button" value="Dy" onClick="addTF(this.value)">66<br/>Dy</button></td>
                <td><button class="color_4 _button" value="Ho" onClick="addTF(this.value)">67<br/>Ho</button></td>
                <td><button class="color_4 _button" value="Er" onClick="addTF(this.value)">68<br/>Er</button></td>
                <td><button class="color_4 _button" value="Tm" onClick="addTF(this.value)">69<br/>Tm</button></td>
                <td><button class="color_4 _button" value="Yb" onClick="addTF(this.value)">70<br/>Yb</button></td>
                <td><button class="color_4 _button" value="Lu" onClick="addTF(this.value)">71<br/>Lu</button></td>
                <td class="noBorder" colspan="1" rowspan="1"></td>
            </tr>
            <tr>
                <td><button class="color_4 _button" value="Ac" onClick="addTF(this.value)">89<br/>Ac</button></td>
                <td><button class="color_4 _button" value="Th" onClick="addTF(this.value)">90<br/>Th</button></td>
                <td><button class="color_4 _button" value="Pa" onClick="addTF(this.value)">91<br/>Pa</button></td>
                <td><button class="color_4 _button" value="U" onClick="addTF(this.value)">92<br/>U</button></td>
                <td><button class="color_4 _button text_color_red" value="Np" onClick="addTF(this.value)">93<br/>Np</button></td>
                <td><button class="color_4 _button text_color_red" value="Pu" onClick="addTF(this.value)">94<br/>Pu</button></td>
                <td><button class="color_4 _button text_color_red" value="Am" onClick="addTF(this.value)">95<br/>Am</button></td>
                <td><button class="color_4 _button text_color_red" value="Cm" onClick="addTF(this.value)">96<br/>Cm</button></td>
                <td><button class="color_4 _button text_color_red" value="Bk" onClick="addTF(this.value)">97<br/>Bk</button></td>
                <td><button class="color_4 _button text_color_red" value="Cf" onClick="addTF(this.value)">98<br/>Cf</button></td>
                <td><button class="color_4 _button text_color_red" value="Es" onClick="addTF(this.value)">99<br/>Es</button></td>
                <td><button class="color_4 _button text_color_red" value="Fm" onClick="addTF(this.value)">100<br/>Fm</button></td>
                <td><button class="color_4 _button text_color_red" value="Md" onClick="addTF(this.value)">101<br/>Md</button></td>
                <td><button class="color_4 _button text_color_red" value="No" onClick="addTF(this.value)">102<br/>No</button></td>
                <td><button class="color_4 _button text_color_red" value="Lr" onClick="addTF(this.value)">103<br/>Lr</button></td>
            </tr>
        </table>

        <form name="compoundForm">
            <input type="text" name="compound"><br>
            <input type="submit" value="Submit">
            <input type="reset" value="Reset"><br>
        </form>
    </center>
</body>

</html>

I think if I can get the value sent to compoundForm via Streamlit I can do what I want, but I don’t know how.

The following code is my prototype, so I will share it for reference.

app.py

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

with open("index.html", "r") as f:
    text = f.read()
    
stc.html(text, width=1200, height=650)

selected = **THE METHOD OF GETTING VALUE FROM HTML**

selected

Please give me your idea, thank you.

2

Hello @BananaTonic, welcome to the community!

Your method of rendering HTML in Streamlit works, unfortunately you won’t be able to pass data from HTML to Streamlit with stc.html as it’s reserved to rendering static components.

You will need to use Streamlit.setComponentValue method inside the bidirectional component part to return a value to Streamlit on a JS event (like clicking the Submit button). You can check the vanilla Typescript version of a bidirectional component here to get an overview of how it looks like, especially the index.tsx file.

Don’t hesitate if you have further questions,
Fanilo

3

Hi @andfanilo, thank you for your quick reply.
OK, I will try a bidirectional component you proposed.