filling httpclient textboxes on a webpage

hello everyone

i am trying to enter the configuration page of my router via arduino

so i used http client and i connected it successfully, but the page i got is the login page.

now i need to send the login infos, so after finishing reading the page code , the arduino must send the username and password to the router and press "login" button

this is the code i got in serial monitor

startedRequest ok
Got status code: 200
Content length is: 7028

Body returned follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RouterOS router configuration page</title>
<style type="text/css">
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
}
img {border: none}
img:hover {opacity: 0.8;}
h1 {
font-size: 1.7em;
display: inline;
margin-bottom: 10px;
}
fieldset {
margin-top: 20px;
background: #fff;
padding: 20px;
border: 1px solid #c1c1c1; 
}
#container {
width: 70%;
margin: 10% auto;
}
#box {
background-color: #fff; 
-moz-border-radius: 7px; 
-webkit-border-radius: 7px; 
border: 1px solid #c1c1c1; 
padding: 30px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f3f3f3'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #fff,  #f3f3f3); /* for firefox 3.6+ */
}
.floater {float: left; margin-right: 10px;}
.floater label {display: block; text-align: center;}

#login {
    margin: 2em 0 4em 0;
}
#login h2 {
    font-weight: normal;
    font-size: 14px;
    margin: 0 0 0.5em 1em;
}
#login td {
    padding: 0 4px 0 0;
}
#login td.label {
    text-align: right;
}
#login td.toolbar {
    padding: 0 0 0 1em;
    vertical-align: top;
}
#login ul.toolbar {
    margin: 0;
}
#login input {
    margin: 2px;
    padding: 2px;
    border: 1px solid #888;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
#error {
    display:none;
    color:red;
    padding: 1em 0 0 0;
}
ul.toolbar {
    font-size: 11px;
    text-align: left;
    list-style-type: none;
    padding: 0;
    margin: 2px 0 4px 2px;
}
ul.toolbar li {
    float: left;
    vertical-align: middle;
}
ul.toolbar a {
    float: none;
    display: block;
    margin: 2px 4px 2px 0;
    padding: 5px;

    background: #ddd;
    border: 1px solid #888;
    border-radius: 3px;
    -moz-border-radius: 3px;
    box-shadow:
        1px 1px 2px rgba(255,255,255,0.8) inset,
	0 10px 10px -5px rgba(255,255,255,0.5) inset, /* top gradient */
	1px 1px 2px rgba(0,0,0,0.2); /* shadow */
    -webkit-box-shadow:
        1px 1px 2px rgba(255,255,255,0.8) inset,
	0 10px 10px -5px rgba(255,255,255,0.5) inset,
	1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow:
        1px 1px 2px rgba(255,255,255,0.8) inset,
	0 10px 10px -5px rgba(255,255,255,0.5) inset,
	1px 1px 2px rgba(0,0,0,0.2);
    color: #000;

    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    cursor: inherit;
    min-width: 4em;

    -webkit-transition: background 0.2s linear, box-shadow 0.2s ease-out;
    -moz-transition: background 0.2s linear, box-shadow 0.2s ease-out;
}
ul.toolbar a:hover {
    background: #eee;
}
ul.toolbar a:active {
    background: #aaa;
    box-shadow: 1px 1px 2px #999 inset;
    -webkit-box-shadow: 1px 1px 2px #999 inset;
    -moz-box-shadow: 1px 1px 2px #999 inset;
}
</style>
<script>
function get(id) {
    return document.getElementById(id);
}
function trim(str) {
    return str.replace(/^\s+|\s+$/g, '');
}
function login(user, pwd, autologin) {
    var expires = new Date();
    expires.setTime(expires.getTime() + (30 * 24 * 60 * 60 * 1000));
    document.cookie = 'username=' + user +
        '; expires=' + expires.toGMTString() + '; path=/';

    window.name = (autologin ? 'autologin=' : 'login=') + user + '|' + pwd;
    window.location.replace('/webfig/' + window.location.hash);
}
function dologin() {
    login(get('name').value, get('password').value);
}
function loaded() {
    var p = window.name.split('=');
    if (p[0] == 'error' && p[1]) {
        var err = get('error');
        err.appendChild(document.createTextNode(p[1]));
        err.style.display = 'block';
    } else if (p[0] != 'noautologin' || p[1] != 1) {
        var user = 'admin';
        if (user) {
            login(user, '', true);
            return;
        }
    }
    window.name = '';

    document.onkeydown = function(e) {
        e = e || event;
        if (e.keyCode == 13) {
            dologin();
            return false;
        }
        return true;
    };

    var username = null;
    var cookies = document.cookie.split(';');
    for (var i in cookies) {
	var c = trim(cookies[i]).split('=');
	if (c[0] == 'username') {
	    username = c[1];
	    break;
	}
    }
    
    if (username != null) {
	get('name').value = username;
	get('password').focus();
    } else {
        get('name').value = 'admin';
	get('name').focus();
    }
}
</script>
</head>

<body onload="loaded()">

<div id="container">

    <div id="box">
    <a href="http://mikrotik.com"><img src="mikrotik_logo.png" style="float: right;" /></a>

    <br style="clear: both;"/>
    
		<h1>RouterOS v6.36.3</h1>
        
        <p>You have connected to a router. Administrative access only. If this device is not in your possession, please contact your local network administrator. </p>
        
      <table id="login">
	<tr><td colspan="3"><h2>WebFig Login:</h2>
        <tr><td class="label">Login: <td><input id="name" type="text" tabindex="1">
	 <td class="toolbar" rowspan="2">
         <ul class="toolbar">
	   <li><a onclick="dologin()" ondragstart="return false;"><span>Login</span></a></li>
         </ul>
         <tr><td class="label">Password: <td><input id="password" type="password" tabindex="2">
	<tr><td colspan="3">
	    <div id="error"></div>
      </table>
            
            <fieldset>
            <div class="floater"> 
            	<a href="http://www.mikrotik.com/download/winbox.exe"><img src="winbox.png"/></a>

                <label>Winbox</label>
            </div>
            
            <div class="floater"> 
            	<a href="telnet://192.168.88.1"><img src="console.png"/></a>

                <label>Telnet</label>
            </div>

            
            
            <div class="floater"> 
            	<a href="/graphs"><img src="green.png"/></a>

                <label>Graphs</label>
            </div>
           
            
            <div class="floater"> 
            	<a href="/help/license.html"><img src="license.png"/></a>

                <label>License</label>
            </div>
            
			<div class="floater"> 
            	<a href="http://wiki.mikrotik.com"><img src="help.png"/></a>

                <label>Help</label>
            </div>

</fieldset>
           
            <br style="clear: both"/> 
                            <div style="float: right">&copy; mikrotik</div>

    </div>
</div>

</div>

</body>
</html>

thanks for the assistance.