-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
124 lines (97 loc) · 4.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>DSW</title>
<style type="text/css">
#main {border: 0px solid black; width:960px;margin: 0 auto;}
#topo {border: 0px solid black; background-image:url("topo.png"); height:140px; background-repeat: no-repeat; background-size:100% 100%; }
#barra {padding: 0 !important; border: 0px solid black;}
#menu {width:20%; float:left; border-radius: 14px 14px 14px 14px; border:0px solid black; }
#centro{width:75%; float:right;border-radius: 14px 14px 14px 14px;padding: 15px;border-color:#666666;background-color: #EEEEEE;}
#rodape{clear:both;background-color: #666666;padding:10px; color:white;border-radius: 25px 25px;}
div {margin-bottom:5px !important; border: 1px solid black;}
ul#lista_barra {border:0px solid black;padding:10px;margin:0px; border-radius: 25px 25px;}
ul#lista_barra li {list-style: none; display: inline-block; padding:10px; margin-right:1px; border:1px solid black; background-color: black;border-radius: 14px 14px 14px 14px;}
ul#lista_barra li a {color: white;text-decoration: none;}
ul#lista_barra li:hover {background-color: green;border-color: green;}
ul#lista_barra li a:hover {color: black;}
ul#lista_menu {border:0px solid black;padding:10px;margin:0px; }
ul#lista_menu li {list-style: none; padding:10px; margin-bottom:2px; border:1px solid black; background-color: gray;}
ul#lista_menu li a {color: white;text-decoration: none;}
ul#lista_menu li:hover {background-color: green;border-color: gray;}
ul#lista_menu li a:hover {color: back;}
body {font-family: verdana; font-size: 14px;}
select{
width: 150px;
margin-left:10px;
vertical-align: text-top;
}
textarea{
width: 250px;
margin-left:10px;
vertical-align: text-top;
}
</style>
<script type="text/javascript">
function salvar(){
var indexEC = document.getElementById("ec").selectedIndex;
var indexQTDF = document.getElementById("qtdf").selectedIndex;
var resultado = "Nome: " + document.getElementById("nome").value;
resultado += "<br><br>Senha: " + document.getElementById("password").value;
resultado += "<br><br>Mostrar senha: " + (document.getElementById("cb").checked ? "TRUE":"FALSE");
resultado += "<br><br>É homem: " + (document.getElementById("sexo1").checked ? "TRUE":"FALSE");
resultado += "<br><br>É mulher: " + (document.getElementById("sexo2").checked ? "TRUE":"FALSE");
resultado += "<br><br>Estado civil: " + document.getElementById("ec")[indexEC].value;
resultado += "<br><br>Quantidade de filhos: " + document.getElementById("qtdf")[indexQTDF].value;
resultado += "<br><br>Descrição: " + document.getElementById("desc").value;
document.getElementById("resultado").innerHTML = resultado;
// var xhttp = new XMLHttpRequest();
//xhttp.onreadystatechange = function() {
//if (xhttp.readyState == 4 && xhttp.status == 200) {
//document.getElementById("resultado").innerHTML = xhttp.responseText;
}
</script>
</head>
<body>
<div id="main" style="absolute">
<div id="topo"></div>
<div id="menu">
<ul id="lista_menu">
<li><a href="#">Imagens</a></li>
<li><a href="#">Vídeos</a></li>
<li><a href="#">Tabelas</a></li>
<li><a href="#">Iframes</a></li>
<li><a href="#">Listas</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Formulários</a></li>
</ul>
</div>
<div id="centro">
<form name="cadastro">
Nome: <input id="nome" type="text"/><br><br>
Senha: <input id="password" type="password"/>
Mostrar senha: <input id="cb" type="checkbox" onClick="document.getElementById('password').type='text';"/><br><br>
Sexo: <br><br><input type="radio" id="sexo1" name="sexo" value="Masculino"/>Masculino<input type="radio" id="sexo2" name="sexo" value="Feminino"/>Feminino<br><br>
Estado civil: <br><br><select id="ec" size="1">
<option name="s" value="SOLTEIRO">Solteiro</option>
<option name="c" value="CASADO" selected>Casado</option>
</select>
<br>Quantidade de filhos: <br><br><select id="qtdf" size="5">
<option name="qf" value="NENHUM">0</option>
<option name="qf" value="UM_FILHO" selected>1</option>
<option name="qf" value="DOIS_FILHOS" selected>2</option>
<option name="qf" value="TRES_FILHOS" selected>3</option>
<option name="qf" value="MAIS_DE_3_FILHOS" selected>Mais de 3 filhos</option>
</select>
<br><br>
Descrição: <br><br><textarea id="desc"></textarea>
<br><br><input type="button" value="Enviar" onClick="salvar()"/>
</form>
<div id="resultado" style="border:1px solid black;padding: 20px;">
Resultado aqui!!!
</div>
</div>
<div id="rodape">HTML - CSS - JAVASCRIPT </div>
</div>
</body>
</html>