Develop Reference

Login and register button both validate user input

I am working on login and register form, both of the forms are doing their work perfectly. But I have a problem, whenever I click on register form it's check user input. It should not do that just simply redirect to registration form but it's not.
<form class="login-form" runat="server">
<div class="form-group">
<label class="sr-only" for="form-username">Username</label>
<asp:TextBox ID="UserName" placeholder="Username..." class="form-control" runat="server" required=""></asp:TextBox>
</div>
<div class="form-group">
<label class="sr-only" for="form-password">Password</label>
<asp:TextBox ID="Password" placeholder="Password..." type="password" class="form-control" runat="server" required=""></asp:TextBox>
</div>
<asp:Button ID="BtnLogin" type="submit" class="btn" runat="server" Text="Login" OnClick="BtnLogin_Click" />
<asp:Button ID="BtnRegister" class="btn" CausesValidation="false" runat="server" Text="Register" OnClick="BtnRegister_Click" />
</form>
What's causing the problem here any idea???

Your register button is submitting the form, as all ASP buttons do, and the required attribute of your inputs is going to validate on a form submit. CausesValidation won't do anything because it's an ASP.Net property (and to be used with ASP.Net validators), whereas the required attribute validation is an HTML5 client-side event.
Try putting the formnovalidate attribute on your Register button:
<asp:Button ID="BtnRegister" class="btn" CausesValidation="false" runat="server" Text="Register" OnClick="BtnRegister_Click" formnovalidate />
W3 Reference:
The novalidate and formnovalidate content attributes are boolean attributes. If present, they indicate that the form is not to be validated during submission.
OR...
If your register button is a simple redirect, it does not need to be a server-side control. Just make it a link and style it like a button:
a.register-btn {
display: inline-block;
background-color: red;
color: white;
text-decoration: none;
border-radius: 3px;
padding: 6px;
font-family: 'Arial';
font-weight: bold;
}
Register

Read text from textarea/textbox in HTML into C# codebehind. (ASP.NET)

I'm trying to use code behind to read text from HTML provided to me. After researching this topic I found that almost all instances of this involve Web Forms controls(asp:) for the textboxes but the HTML I was given does not, but instead is:
<p>
<label>Address</label>
<textarea class="w3-input w3-border" name="addr" cols="30" rows="4"></textarea>
</p>
<div class="w3-half w3-container">
<p>
<label>Phone:</label>
<input type="text" class="w3-input"/>
</div>
<div class="w3-half w3-container">
<label style="padding-left:10px;">Email:</label>
<input type="text" class="w3-input"/>
</div>
</p>
Will I still be able to read the user-provided text from these boxes or will I need to alter the HTML?
A couple of my unsuccessful code-behind attempts to extract the address supplied:
string address = ((textarea)Address.FindControl("addr")).Text;
string address = ((TextBox)Address.FindControl("addr")).Text;
Update:
Using the server control described in a solution offered, I get an error message stating that "A page can have only one server-side Form tag."
This results from the following markup:
<form runat="server">
<asp:textbox id="addr" runat="server" textmode="multiline" />
</form>
followed later by:
<form runat="server">
<asp:Button ID="Ship" runat="server" Text="Ship" OnClick="Ship_Click" style="padding: 10px; margin-bottom: 10px;" class="w3-round w3-blue" />
<asp:Button ID="Rate" runat="server" Text="Rate" OnClick="Rate_Click" style="padding: 10px; margin-bottom: 10px;" class="w3-round w3-blue" />
</form>
The textarea is located in a different section than the buttons and I'm unclear on how to make both functional either without a form tag or without having them share the same one. Thanks

You need to use a server control if you're looking to access the value in code behind. Use an ASP TextBox and set the TextMode to MultiLine:
<asp:TextBox ID="textarea1" runat="server" TextMode="MultiLine" />
Then in code behind:
string addr = textarea1.Text;
UPDATE to demonstrate multiple forms on the same page:
<form ID="form1" runat="server">
<asp:Button ID="Ship" runat="server" Text="Ship" OnClick="Ship_Click" style="padding: 10px; margin-bottom: 10px;" class="w3-round w3-blue" />
<asp:Button ID="Rate" runat="server" Text="Rate" OnClick="Rate_Click" style="padding: 10px; margin-bottom: 10px;" class="w3-round w3-blue" />
</form>
<form id="form2" action="WebForm1.aspx" method="post">
<asp:TextBox ID="textarea1" runat="server" TextMode="MultiLine" />
</form>
From here, you can use either method of retrieving the textarea1 value in code behind for posts from form1 or form2...
form1:
string addr = textarea1.Text;
form2:
string addr = Request["textarea1"].ToString();

Add runat="server" to your TEXTAREA and INPUT tags. Then you can access them from code-behind. You also need to assign the ID attribute of each one.
<p>
<label>Address</label>
<textarea class="w3-input w3-border" name="addr" id="textarea1" runat="server" cols="30" rows="4"></textarea>
</p>
<div class="w3-half w3-container">
<p>
<label>Phone:</label>
<input type="text" class="w3-input" runat="server" id="input1" />
</div>
<div class="w3-half w3-container">
<label style="padding-left:10px;">Email:</label>
<input type="text" class="w3-input" runat="server" id="input2" />
</div>
</p>

ASP:Button CSS :after Selector (or :before)

Does anyone know how to make it work?
It's weird cause when I'm testing only HTML & CSS - it's working well, but when I'm trying to add it to ASP:
.button - works well, but .button:after (or.button:before) - not working at all...
<asp:Button ID="Button1" type="submit" runat="server" CssClass="login-button" Text="Login"></asp:Button>
.login-button:after {
position: absolute;
top: 15px;
left: 12px;
width: 25px;
height: 19px;
background: url("../img/bg.png") 0 0 no-repeat;
}

The <asp:Button> renders as <input type="button"... /> in browser.
Either add runat="server" with name="btnSubmit" and id="btnSubmit" to <button> tag or create your own custom asp.net control:
<button type="submit" runat="server" name="btnSubmit" id="btnSubmit" class="login-button">Login</button>

Use
<button type="submit" runat="server" name="btnSubmit" id="btnSubmit" class="login-button">
Login</button>
instead of
<asp:Button ID="Button1" runat="server" CssClass="login-button" Text="Login"/>
this is work for me in my Application

popup control linkbutton prevent postback

I am using a popup control with a link button inside that is used to close the popup. The problem is that the link button (or image button in the code below) is causing a full postback which is not intended. Can anyone help? below is the code.
<asp:PopupControlExtender ID="PopupControlLogin" BehaviorID="logpop" Position="Bottom"
TargetControlID="myLogin" PopupControlID="PanelLogin" runat="server">
</asp:PopupControlExtender>
<asp:Panel ID="PanelLogin" Style="position: absolute; display: none;" runat="server">
<div style="border: solid 1px #808080; border-width: 1px 0px;">
<div style="background: url(images/sprite.png) repeat-x 0px -200px;">
<asp:Label ID="Label2" runat="server" Style="font-weight: bold;" Text="Login" />
<asp:ImageButton ID="ImageButton1" Style="background: url(images/sprite.png) no-repeat 0px -300px;"
OnClientClick="$find('logpop').hide(); return false;" runat="server" />
</div>
<div style="background-color: #f2f2f2; width: 300px; height: 150px;">
My Content
</div>
</div>
</asp:Panel>

You are using it correctly, but I think there's an error in your jquery $find. Should be
$('#logpop').hide();
or
OnClientClick="$('#logpop').hide(); return false;"

I would change the button to a straight HTML link:
<img src="images/sprite.png" />
You can adjust the display as needed, but this should be what you need.

DropShadowExtender and RoundedCornersExtender not playing nicely with ModalPopupExtender

I have the following panel
<asp:Panel ID="pnlSessionController" runat="server" style="position: relative; display: block; padding:15px; height: 150px; width: 300px; background-color: white;">
<div style="position:absolute; top:0; right: 0;">
<asp:ImageButton ID="btnActiveSessionCancel" runat="server" ImageUrl="~/images/controls/exit.png" />
</div>
<div style="margin-left: auto; margin-right: auto; width: 270px; text-align: center;">
<asp:Image ID="imgStatus" runat="server" ImageUrl="~/images/status/current.png" /><br />
<asp:Label ID="lblInmateStationName" runat="server"></asp:Label><span><--></span><asp:Label ID="lblVisitorStationName" runat="server"></asp:Label><br />
<span>Time Remaining: </span><asp:Label ID="lblTimeRemaining" runat="server" ForeColor="Red"></asp:Label>
</div>
<div style="padding-left: 20px; padding-top: 15px;">
<div style="float: left; padding-right: 10px;">
<asp:ImageButton ID="imgBtnSessionRestart" runat="server" ImageUrl="~/images/controls/play.png" OnClick="btnRestart_click" />
</div>
<div style="float: left; padding-right: 10px;">
<asp:ImageButton ID="imgBtnSessionPause" runat="server" ImageUrl="~/images/controls/pause.png" OnClick="btnPause_click" />
</div>
<div style="float: left; padding-right: 10px;">
<asp:ImageButton ID="imgBtnSessionRecord" runat="server" ImageUrl="~/images/controls/record_off.png" />
</div>
<div style="float: left; padding-right: 10px;">
<asp:ImageButton ID="imgBtnSessionStop" runat="server" ImageUrl="~/images/controls/stop.png" OnClick="btnEnd_click" />
</div>
<div style="float: left; padding-right: 10px;">
<asp:Image ID="imgBtnSessionMonitor" runat="server" Height="27px" Width="27px" ImageUrl="images/controls/monitor.png" onclick="monitorSesion()"/>
</div>
<div style="float: left;">
<asp:ImageButton ID="imgBtnMessage" runat="server" ImageUrl="~/images/controls/message.png" OnClick="btnMessage_click"/>
</div>
</div>
</asp:Panel>
Because this information is going to be bound server side depending on which control in a datalist is selected I have:
<cc1:ModalPopupExtender ID="mpeActiveSession" runat="server" TargetControlID="hackForPopup" DropShadow="false" PopupControlID="pnlSessionController"
CancelControlID="btnActiveSessionCancel" OnCancelScript="ActiveSessionPopupCanceled()"></cc1:ModalPopupExtender>
I then call mpeActiveSession.Show() in the code-behind after I bind the data.
OK, I had a drop shadow specified in the control but that is where the story begins. I finish this guy up and it is working beautifully, and the damn customer complains that the pop-ups don't look suave enough. What they really meant was that the pop-ups don't look enough like Mac Windows. Anyways, they requested rounded corners and for the drop shadow to be less opaque and rounded. So, I say ok, hopefully I can just add the following.
<cc1:RoundedCornersExtender ID="rceSessionController" TargetControlID="pnlSessionController" Radius="10" runat="server" Corners="All" BorderColor="Gray"></cc1:RoundedCornersExtender>
<cc1:DropShadowExtender ID="dsSessionController" runat="server" Opacity=".7" TrackPosition="true" TargetControlID="pnlSessionController"></cc1:DropShadowExtender>
Now it doesn't render correctly. One of the divs gets the rounded corner, the position on the page is wrong, and all of the controls and text are missing. Any ideas? I am also open to a better approach to styling the popup.

Ok the RoundedCornersExtender and the DropShadowExtender are obsolesced by CSS3. All you need is border-radius and box-shadow.
Anyhow, the problem with the extenders was that my parent div used relative positioning. It doesn't matter now however, because the CSS3 stuff looks much better and is easier to implement anyways.