How to put a button in a textarea in ASP.NET, C #?

Question

How to put a button in a textarea in ASP.NET, C #?

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

Good. I have the following sketch of a contact form made in wix.com but I wanted to put it also in my asp.net project.

Sofar,itlookslikethis:

Mycodeisasfollows:

<body><style>textarea,input{border:2pxsolidrgba(7,143,27,1);padding:5px10px;background-color:white;font-family:Arial;width:400px;height:33px;}</style><formid="form1" runat="server">
        <div>
            <table border="0" style="width: 409px">
                <tr>
                    <td>
                        <asp:TextBox ID="txtName" runat="server" ValidationGroup="contact" placeholder="Nome*"></asp:TextBox>
                        <br />

                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="*Campo obrigatório"
                            ControlToValidate="txtName"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:TextBox ID="TextBox1" runat="server" placeholder="Assunto*"></asp:TextBox>
                        <br />
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="*Campo obrigatório"
                            ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:TextBox ID="txtEmail" runat="server" placeholder="Email*"></asp:TextBox>
                        <br />

                        <asp:RegularExpressionValidator ID="valRegEx" runat="server"
                            ControlToValidate="txtEmail"
                            ValidationExpression=".*@.*\..*"
                            ErrorMessage="*Endereço de email inválido."
                            Display="dynamic">

                        </asp:RegularExpressionValidator>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="*Campo obrigatório"
                            ControlToValidate="txtEmail"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" placeholder="Mensagem*"></asp:TextBox>
                        <br />

                        <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="*Campo obrigatório"
                            ControlToValidate="TextBox2"></asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <%--<td></td>--%>
                    <td>
                        <asp:Button ID="btnSend"  runat="server" Text="Enviar"  OnClick="btnSend_Click" />
                    </td>
                </tr>
                <tr>
                    <%--<td></td>--%>
                    <td>
                        <asp:Label ID="lblMessage" runat="server" Text="" ForeColor="Green"></asp:Label>
                    </td>
                </tr>
            </table>

        </div>
    </form>
</body>
</html>

Anyone can help please? Thank you in advance!

html c# css webforms

asked by anonymous 22.05.2018 / 17:25

2 answers

1

My caveat regarding Leandro's code is careful not to change the display of the element that is a table-cell by flex . I believe that with position is only more appropriate for this situation.

Used by @LeandroAngelo's code I made this template.

textarea,
input,
button {
  border: 2px solid rgba(7, 143, 27, 1);
  padding: 5px 10px;
  background-color: white;
  font-family: Arial;
  width: 400px;
  height: 33px;
}

textarea {
  height: 150px;
}

button {
  width: 200px;
    height: 60px;
    position: absolute;
    bottom: -22px;
    margin: 0 auto;
    left: 0;
    right: 0;
}
.rel {
  position: relative;
}

<form id="form1" runat="server">
  <div>
    <table border="0" style="width: 409px">
      <tr>
        <td>
          <input type="text" ID="txtName" ValidationGroup="contact" placeholder="Nome*" />
          <br />
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" ID="TextBox1" placeholder="Assunto*" />
          <br />
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" ID="txtEmail" placeholder="Email*">
          <br />
        </td>
      </tr>
      <tr>
        <td class="rel">
          <button ID="btnSend">Enviar</button>
          <textarea ID="TextBox2" TextMode="MultiLine" placeholder="Mensagem*"></textarea>
          <br />
        </td>
      </tr>
      <tr>
        <td></td>
      </tr>
    </table>
  </div>
</form>

22.05.2018 / 18:27

Problems with positioning icons What is wrong with the logic of this code that adds numbers tracks?

score 3 · Accepted Answer

In this case, just "play" with CSS and do not put your button in a new <tr> . See the example below:

textarea,
input,
button {
  border: 2px solid rgba(7, 143, 27, 1);
  padding: 5px 10px;
  background-color: white;
  font-family: Arial;
  width: 400px;
  height: 33px;
}

textarea {
  height: 150px;
}

button {
  width: 200px;
  height: 60px;
  display: block;
  margin: 80px auto;
  position: absolute;
}

td {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
}

<html>

<body>
  <form id="form1" runat="server">
    <div>
      <table border="0" style="width: 409px">
        <tr>
          <td>
            <input type="text" ID="txtName" ValidationGroup="contact" placeholder="Nome*" />
            <br />
          </td>
        </tr>
        <tr>
          <td>
            <input type="text" ID="TextBox1" placeholder="Assunto*" />
            <br />
          </td>
        </tr>
        <tr>
          <td>
            <input type="text" ID="txtEmail" placeholder="Email*">
            <br />
          </td>
        </tr>
        <tr>
          <td>
            <button ID="btnSend">Enviar</button>
            <textarea ID="TextBox2" TextMode="MultiLine" placeholder="Mensagem*"></textarea>
            <br />
          </td>
        </tr>
        <tr>
          <td></td>
        </tr>
      </table>
    </div>
  </form>
</body>

</html>