html form表单实现注册页面

最新推荐文章于 2024-04-25 17:53:36 发布

从运维到开发

最新推荐文章于 2024-04-25 17:53:36 发布

阅读量3k

点赞数 3

分类专栏： html form表单文章标签：前端 html form表单

本文链接：https://blog.csdn.net/dengyuelin/article/details/89084148

版权

html 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

form表单

3 篇文章 0 订阅

订阅专栏

#浏览器向服务器提交数据的两种方式：form表单，Ajax，form表单是将数据统一打包发送给server，而Ajax是填写一条数据就发送一次，做一次验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<h1>注册页面</h1>
<form action="http://127.0.0.1:8080/index" method="get" enctype="multipart/form-data">   #action指定表单提交的server端的路径，每一个路径都有一个处理的函数,method是提交方式，默认get，get是提交到表头，post是提交到里面,enctype="multipart/form-data"分段往上传

<p>姓名<input type="text" name="username" placeholder="姓名"></p>
<p>密码<input type="password" name="password" placeholder="密码" readonly="readonly"> </p>   #password加密显示，text是铭文显示
<p>爱好 音乐<input type="checkbox" name="hobby" value="music">电影<input type="checkbox" name="hobby" value="movie"></p>  #选择兴趣爱好，多选框方的格子

<p>性别: 男<input type="radio" name="gender" value="men">女<input type="checkbox" name="gender" value="women"></p>   #单选框圆的,需要加上name才能实现单选功能
<p><input type="reset" value="重置"></p>
<p><input name="put_file" type="file"></p>  #上传文件，还需要在form属性中加入enctype="multipart/form-data"表示分段提交，在server端的views.Py中加入print("FILES:,req.FILES)  #收文件files的方式
<p><input type="submit"  value="提交注册"></p>  #submit会将上面输入的内容封装好打包通过浏览器http协议全部提交给server
<p><input type="button"></p>   #点击不会触发任何事件，要和JS结合使用才能触发事件

省份<select name="province"  multiple="multiple" size="2">  #multiple表示可以在下拉条中多选,size表示可选择的最多个数
        <optgroup label="河北省">  #这个label对应的内容不能选，这个用的不多
            <option value="handan">邯郸</option>
            <option value="baoding" selected="selected">保定</option>
            <option value="shijiazhuang">石家庄</option>
        </optgroup>
<option value="beijing" selected="selected">北京市</option>  #selected表示默认选中北京市
<option value="hebei">河北省</option>
<option value="shanxi">陕西省</option>
<option value="shandong">山东省</option>
</select>

简介<textarea name="desc" cols="5" rows=""></textarea>
    <label for="www">姓名</label>   #for的值跟下面input 中的id的值相等的话就可以关联起来，只需要点击姓名就可以选中文本框输入
    <input id="www" type="text">

    <fieldset></fieldset>

    <table border="lpx " cellpadding="10px" cellspacing="50px">   #border边框,cellpadding表示字与边框内边距的距离，cellspacing外边距内部边框与边界的距离
        <thead>   #<thead>,<tbody>都可以不用了只是增加代码可读性，起作用的是tr，
        <tr>
            <th >111</th>   #<th></th>有加粗加黑的效果
            <th>222</th>

        </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">1111</td>  #rowspan让这一格占两行
                <td>2222</td>
                <td colspan="2">3333</td>   #colspan这一格占两列
            </tr>
           <tr>
                <td>1111</td>
                <td>2222</td>
                <td>3333</td>
            </tr>
           <tr>
                <td>1111</td>
                <td>2222</td>
                <td>3333</td>
            </tr>
        </tbody>

        <tr>
            <th>mom</th>
            <th>dad</th>
            <th>son</th>
        </tr>
        <tr>
            <td>50</td>
            <td>50</td>
            <td>18</td>
        </tr>
    </table>

</form>
</body>
</html>

get和post方法的区别

   GET方法就是把客户端的请求内容放在url后面会显示出来，然后打包给服务端
       1.提交的键值对，放在地址栏中url后面
       2.安全性相对较差
       3.对提交内容的长度有限，不能超过2k，但有的浏览器做了扩充，不能超过8k
   POST方法在url里面看不到请求信息，但是能在Form Data里看到，相对get要安全一点
       1.提交的键值对，不在地址栏
       2.安全性相对较高
       3.对提交内容的长度理论上无限制
   发数据一般用post，请求查看某一个数据的时候（比如请求url）一般用get

从运维到开发

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
html form表单实现注册页面

#浏览器向服务器提交数据的两种方式：form表单，Ajax，form表单是将数据统一打包发送给server，而Ajax是填写一条数据就发送一次，做一次验证<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</ti...
复制链接

扫一扫