HTML5网页前端设计中如下图表单的代码怎么写?

HTML5网页前端设计中如下图表单的代码怎么写?,第1张

下面是表单代码,你直接再加属性就可以了,表单用 table 写比较简单,div 太麻烦了;

<html xmlns=" http://www.dayinmandarin.com ">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>黑板</title>

</head>

<body>

<div style="width:500px">

<h1 style="width:500pxheight:50pxcolor:#2A8DF0border-bottom:#2A8DF0 solid 3pxtext-align:center">用户注册页面</h1>

<table cellpadding="0" cellspacing="10" style="margin:0 auto">

<tr>

<td align="right" valign="top"><div>用户名:</div></td>

<td><input style='width:250px' value='请输入用户名' /></td>

</tr>

<tr>

<td align="right" valign="top"><div>密 码:</div></td>

<td><input style='width:250px' value='请输入密码' /></td>

</tr>

<tr>

<td align="right" valign="top"><div>确 认:</div></td>

<td><input style='width:250px' value='请再次输入密码' /></td>

</tr>

<tr>

<td align="right" valign="top"><div>姓 名:</div></td>

<td><input style='width:250px' value='请输入真实姓名' /></td>

</tr>

<tr>

<td align="right" valign="top"><div>邮 箱:</div></td>

<td><input style='width:250px' value='请输入电子邮箱' /></td>

</tr>

</table>

<div align="center"><input style="width:100pxheight:30pxtext-align:centerline-height:30pxbackground:#2289F0border:#2289F0color:whitefont-weight:boldfont-size:16px" type="submit" value="提交注册" /></div>

</div>

</body>

</html>

1、首先,在计算机桌面上创建一个新文件夹,然后在该文件夹中创建一个新的文本文档。

2、然后双击打开带有记事本的文本文档,如下图所示,我们编写一个简单的html代码。

3、单击“另存为”的功能选项,显示默认保存为编码为ANSI。

4、我们将更改编码和文件名,将其更改为如图所示的图像并保存。

5、然后返回到新创建的文件夹,发现有一个额外的html文件。

6、最后,使用浏览器打开html文件,效果如图所示,简单的网页被成功编写。

html前端代码:

<html>  

<body>  

    <form action="upload-file.php" method="post"  

        enctype="multipart/form-data">  

        <label for="file">文件名:</label>  

        <input type="file" name="file" id="file" />  

        <br/>  

        <input type="submit" name="submit" value="提交" />  

    </form>  

</body>  

</html>

如果是ubuntu上部署apache2,你应该是php开发者吧,action="upload-file.php

" 中的upload-file.php改为你自己的后端php接收文件的逻辑代码即可!

这里提供upload-file.php后端接收文件的代码:

<?php  

if ($_FILES["file"]["error"] > 0)  

  {  

  echo "错误: " . $_FILES["file"]["error"] . "<br />"  

  }  

else  

  {  

  echo "文件名: " . $_FILES["file"]["name"] . "<br />"  

  echo "类型: " . $_FILES["file"]["type"] . "<br />"  

  echo "大小: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />"   

  }  

 if (file_exists("upload/" . $_FILES["file"]["name"]))  

    {  

      echo $_FILES["file"]["name"] . " 文件已经存在. "  

    }  

else  

    {  

      move_uploaded_file($_FILES["file"]["tmp_name"],  

      "upload/" . $_FILES["file"]["name"])  

      echo "文件已经被存储到: " . "upload/" . $_FILES["file"]["name"]  

    }   

?>

代码很简单,我相信你应该能看懂,这里的 文件夹 upload/ 需要你自己手动创建,请确保文件路径正取!

我也是web开发者,有问题可继续追问我!或是加我工作室QQ(540144097),在群里向我提问!有问必答,望采纳......


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7270136.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存