I`m trying to make a form that has 3 inputs:
- image (file) upload
- 1st text field
- 2nd text field (that saves entered text as .txt file and displays a link in the third column)
After entering all 3 inputs, I would like to add the data into existing html table as an additional row.
Could you please suggest where should I start? Do I need to use mySQL in order to accomplish this? Or I can only use PHP and jQuery?
Here is the link to my page: https://jsfiddle.net/tvLn0qw7/
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:white;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}
p {
line-height:1.5;
margin:0 0 1em;
}
div#container {
position: relative; /* needed for footer positioning*/
margin: 0 auto; /* center, not in IE5 */
width: 1000px;
background-color: #FFFFFF;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height: 100%;
border: 2px solid #000000;
}
div#header {
padding: 1em;
background: #ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom: 6px double gray;
text-align: center;
margin: 0 auto;
}
div#header p {
font-style:normal;
font-size:1.1em;
margin:0;
}
div#content {
padding:0em 0em 5em; /* bottom padding for footer */
border-color: #000000;
border: 2px;
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
text-align:center;
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
div#footer p {
padding:0.5em;
margin:0;
}
table {
margin: auto;
text-align: center;
color: #0454A8;
font-size: xx-large;
font-style: normal;
font-weight: bold;
border: 1px;
border: #000000;
}
body,td,th {
color: #000000;
}
#upload {
margin: auto;
text-align: center;
}
a:link {
color: #3757A3;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><img src="images/crown1.png" width="108" height="77" alt=""/><br><br>
<p>Databse</p>
</div>
<div id="content">
<br><br>
<table width="600px" border="2" cellpadding="15" cellspacing="5">
<tbody>
<tr>
<th style="font-size: medium" scope="col"><div align="center">SCREENSHOT</div></th>
<th style="font-size: medium" scope="col">#</th>
<th style="font-size: medium" scope="col">TEXT FILE</th>
</tr>
<tr>
<th width="111" style="font-size: medium" scope="col"><div align="center"><img src="images/b0.png" width="200" height="113" alt=""/></div> </th>
<th width="8" style="font-size: medium" scope="col">1</th>
<th width="79" style="font-size: medium" scope="col"><a href="http://futios.net/sample.txt">sample.txt</a></th>
</tr>
</tbody>
</table>
<br><br> <br>
<<br> <br><br>
<div id="upload"><form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
<br><br>
Type #:
<input type="text" size="100">
<br><br>
Insert text here:
<input type="text" size="100">
</form>
</div>
<br><br><br>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Thank you very much.
