index.html

<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font: 13px Helvetica, Arial; }
  form { background: grey; padding: 10px; position: fixed; bottom: 0; width: 100%; }
  form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
  form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
  #messages { list-style-type: none; margin: 0; padding: 0; }
  #messages li { padding: 5px 10px; }
  #messages li:nth-child(odd) { background: #eee; }
</style>
<link rel="stylesheet" href="style.css">
<div class="login page">
        <div class="form">
        <input id="man" type="radio"  name="1" value="male"/><h4 class="title">男</h4><input class="title" id="woman" type="radio"  name="1" value="female" /><h4 class="title">女</h4>
        <br/> 
        <h3 class="title">昵称</h3>

        <input class="usernameInput" type="text" maxlength="14" />   
 </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="clientmain_pre.js"></script>