How to place a button in a textarea in Asp.net, c#?

Asked

Viewed 686 times

1

Good. I have the following draft of a contact form done on Wix.com but I wanted to put it in my Asp.net project as well.. esboço

So far, so good :

amostra

My code is this::

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





    </style>
    <form id="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>

Can anyone please help? Thanks in advance!

c# html css webforms

2 answers

3


In this case, just "play" with CSS and don’t put your button in a new one <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>

  • Nice young lady thought the same thing, only with position only, so you don’t have to change from table-Cell to flex. I hope you don’t mind me using part of your code ;)

  • @hugocsl, It’s all yours, css I just give pitaco not to leave the AP in hand and hope someone come up with the most complete answer.

  • For me it served! Thank you :)

  • There are times that simple is the most difficult to think rss and speaking in CSS almost always has more than one way to do... []s

1

My reservation regarding the Leandro code is the care in not changing the display of the element that is a table-cell for flex. I believe that with position is only more suitable for that situation.

Used code Parde @Leandroangelo 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>

Browser other questions tagged c# html css webforms

You are not signed in. Login or sign up in order to post.