表单实操二
登录 / 注册
暂无权限

加入尚新途，才有权限看这些视频哦！

点击前往
×
问答
？
1楼

为什么我的shift+alt+up/down用不了

尚新途

复制吗，看看选中

？

不行，一起按是窗口缩小

尚新途

好吧，不过也没啥，可能是和别的快捷键冲突了，没办法快捷那就正常操作就好

？

明白


Lidia
2楼
这里写value的意义是什么？

1713359046706.png

尚新途

真实的内容，后期i为了方便前后端数据交互

微信用户
3楼
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .phone {
        width: 1300px;
        height: 680px;
        margin: 0 auto;
        background-color: bisque;
    }

    .left {
        width: 234px;
        height: 680px;
        background-color: rgb(236, 41, 7);
    }

    .right {
        float: right;
        width: 1050;
        height: 680px;
        background-color: aliceblue;
    }

    .box {
        float: left;
        width: 250px;
        height: 300px;
        background-color: black;
        margin-top: 10px;
        margin-left: 10px;
    }
</style>

<body>
    <div class="phone">
        <div class="left"></div>
        <div class="right">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </div>
</body>

</html>

老師，我的網頁加載后right裏面内容都向下排列了

尚新途

没有问题呀，我这边看着没啥问题，

orn
4楼

我输入

<textarea>后回车不会自动弹出

cols 和rows

是什么原因呢，而且我的自定义文本框可以在网页中自由拉大拉小是正常的吗



尚新途

正常

cc
5楼

到底什么时候需要用form表单包裹呢，为什么有的input被包裹，有的没有被包裹。输入框不需要form吗？

尚新途

form一般是前后端交互数据时候使用的

input type进行选择其功能，单一个输入框是不需要form的

玖月
6楼
<body>
    <table align="center">
        <tr>
            <td align="right">姓名：</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td align="right">密码：</td>
            <td>
                <input type="password">
            </td>
        </tr>
        <tr>
            <td align="right">确认密码：</td>
            <td>
                <input type="password">
            </td>
        </tr>
        <tr>
            <td align="right">密码提示问题：</td>
            <td>
                <select name="" id="">
                    <option value="">请选择一个问题</option>
                    <option value="">问题1-----</option>
                    <option value="">问题2-----</option>
                    <option value="">问题3-----</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align="right">密码提示答案：</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td align="right">性别：</td>
            <td>
                <input type="radio" name="sex" value="男">男
                <input type="radio" name="sex" value="女">女
            </td>
        </tr>
        <tr>
            <td align="right">年龄：</td>
            <td>
                <input type="number" min="1" max="150">
            </td>
        </tr>
        <tr>
            <td align="right">籍贯：</td>
            <td>
                <select name="" id="">  
                    <option value="">请选择</option>
                    <option value="">甘肃</option>
                    <option value="">江苏</option>
                    <option value="">陕西</option>
                </select>省/直辖市
                <select name="" id="">请选择
                    <option value="">兰州</option>
                    <option value="">苏州</option>
                    <option value="">宝鸡</option>
                </select>市
            </td>
        </tr>
        <tr>
            <td align="right">爱好：</td>
            <td>
                <input type="checkbox" name="love" value="上网">上网
                <input type="checkbox" name="love" value="看电影">看电影
                <input type="checkbox" name="love" value="学习">学习

            </td>
        </tr>
        <tr>
            <td align="right">个人介绍：</td>
            <td>
                <textarea cols="30" rows="5"></textarea>
            </td>
        </tr>
        <tr>
            <td align="right">上传头像：</td>
            <td>
                <input type="file">
            </td>
        </tr>
        <tr align="center">
            <td colspan="2">
                <input type="submit" value="确认提交">
                <input type="reset" value="重新输入">
            </td>
        </tr>
    </table>
</body>

按钮想生效，不得用form把整个表格放到里面去吗，

为啥只有我提交的代码时黑白的~~~

image.png

尚新途

理解的不错

啊铖
7楼
按照视频写的表单，重置按钮没有作用啊

QQ截图20221001195853.png

QQ截图20221001200008.png


尚新途

js逻辑对了吗，先获取页面元素，添加事件，把value拿到

?
8楼

微信图片_20220919204804.png


这个input为什么不放在form里？

尚新途

他就是个输入框，不放进去也可以


张鹏
9楼

问题1:reset或是submit是不是只对当前form里同层级的表单元素生效？

问题2: 本章节里的，如果需要reset生效，form放在table里还是放在table外，哪种是目前比较推荐和主流的做法？

问题3: 下拉框或是复选框没有form也能达到效果，是不是最外层有form了，那这几个元素不用非要就近套一个form呢？

 <tr>

            <td align="right">爱好:</td>

            <td>

                <input type="checkbox" name="area" id="bj"> 北京

                <input type="checkbox" name="area" id="sh"> 上海

                <input type="checkbox" name="area" id="gz"> 广州

                <input type="checkbox" name="area" id="hb"> 湖北

            </td>

        </tr>


尚新途

  1. 是对当前所在表单生效，如果没有定义表单的话则会提交整个页面

  2. reset在外面生效也可以，可以使用js配合实现功能

  3. 下拉和复选可以直接不用form，最外层有一个就可以，主要是name名字相同

WT
10楼

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>


<body>

    <table align="center" style="width: 500px; height: 600px;">

        <form>

            <tr>

                <td align="right">姓名</td>

                <td>

                    <input type="text">

                </td>

            </tr>

            <tr>

                <td align="right">密码</td>

                <td>

                    <input type="password">

                </td>

            </tr>

            <tr>

                <td align="right">确认密码</td>

                <td>

                    <input type="password">

                </td>

            </tr>

            <tr>

                <td align="right">密码提示问题</td>

                <td>

                    <select>

                        <option value="title">请选择一个问题</option>

                        <option value="name">名字</option>

                        <option value="age">年龄</option>

                        <option value="sex">性别</option>

                    </select>

                </td>

            </tr>

            <tr>

                <td align="right">密码提示答案</td>

                <td>

                    <input type="text">

                </td>

            </tr>

            <tr>

                <td align="right">性别</td>

                <td>

                    <form>

                        <input type="radio" name="sex" value="">男

                        <br />

                        <input type="radio" name="sex" value="">女

                    </form>

                </td>

            </tr>

            <tr>

                <td align="right">年龄</td>

                <td>

                    <input type="number">

                </td>

            </tr>

            <form>

                <tr>

                    <td align="right">籍贯</td>

                    <td>

                        <select>

                            <option value="title">请选择</option>

                            <option value="s">河南</option>

                            <option value="s">江苏</option>

                            <option value="s">浙江</option>

                        </select>

                        省/直辖市

                        <select>

                            <option value="title">请选择</option>

                            <option value="ss">郑州市</option>

                            <option value="ss">苏州市</option>

                            <option value="ss">杭州市</option>市

                        </select>

                    </td>

                </tr>

                <tr>

                    <td align="right">爱好</td>

                    <td>

                        <input type="checkbox" name="vehicle" value="">上网

                        <input type="checkbox" name="vehicle" value="">看电影

                        <input type="checkbox" name="vehicle" value="">游戏

                    </td>

                </tr>

                <tr>

                    <td align="right">个人介绍</td>

                    <td>

                        <textarea name="" id="" cols="30" rows="10"></textarea>

                    </td>

                </tr>

                <tr>

                    <td align="right">上传头像</td>

                    <td>

                        <input type="file" name="img">

                    </td>

                </tr>

                <tr align="center">

                    <td colspan="2">

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

                        <input type="reset" value="重置">

                    </td>

                </tr>

            </form>

    </table>

</body>


</html>

为啥有的能重置性别上面的都不能重置

尚新途

1. 重置真正的操作方式是后期通过js调用reset()方法重置

2. 这里在没有使用js的情况下。默认重置了最后一个form表单

3.单选按钮这个无法重置(其实不同的浏览器和不同浏览器版本的设定都不太一样)，所以单选按钮是需要使用js操作的


WT
11楼

<table align="center">

这样写align是红色的，是错误的意思吗

尚新途

红色的在这里不是错误，是不推荐这样操作。后续会使用css调整他的居中操作

在表格中，使用属性爆红的有很多，例如border也会。也是不推荐这样操作。后续都会使用css操作

WT
12楼

<>这个里面是不是不能有中文，value的双引号里面不写东西行不行

尚新途

<>：包裹的一定是标签。标签是不存在中文的

value的双引号里面可以不写内容，程序上不会报错。但是缺少意义。如果不写内容。那还不如直接就不写value属性了。


WT
13楼

老师为什么有的用form标记，有的直接用select和input,没有用form包裹

尚新途

select和input需要在form表单中使用的啊

.
14楼
<form action="" method="post">
            <input type="text" value=""/>
            <button type="reset">重置</button>
        </form>

那这个意思是不是说重置按钮只能重置同一个form表单下输入框的数据，那么本次实操中这个重置按钮的意义是什么？或者说用什么办法能实现整个表格的重置？

尚新途

用一组form包裹整个表格就可以实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<table border="1" cellspacing="1" cellpadding="1">
<form action="" method="">
<tr>
<th>Header</th>
</tr>
<tr>
<td><input type="text" name="" id="" value="" /></td>
</tr>
<tr>
<td>
<button type="submit">提交</button>
<button type="reset">重置</button>
</td>
</tr>
</form>

</table>
</body>
</html>


尚新途

用您的这个代码确实可以实现重置，我还有两个问题。1：用form包裹整个表格form标签为什么不写在table标签的外面；2：我想知道用什么办法能将实操中的整个表格重置，如果用form表单包裹整个表格，像如下这样还是没有办法将整个表格重置啊。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <table align="center">

        <form action="">

        <tr>

            <td align="right">姓名:</td>

            <td>              

                    <input type="text">      

            </td>

        </tr>

        <tr>

            <td align="right">密码:</td>

            <td>              

                    <input type="password">

            </td>

        </tr>

        <tr>

            <td align="right">确认密码:</td>

            <td>

                <input type="password">

            </td>

        </tr>

        <tr>

            <td align="right">密码提示问题:</td>

            <td>

                <form action=""><select name="" id="">

                        <option value="title">请选择问题</option>

                        <option value="m">您母亲的名字</option>

                        <option value="f">您父亲的名字</option>

                        <option value="b">您高中班主任的名字</option>

                    </select>

                </form>

                   

            </td>

        </tr>

        <tr>

            <td align="right">密码提示答案:</td>

            <td>

                <input type="text">

            </td>

        </tr>

        <tr>

            <td align="right">性别:</td>

            <td>

                <form action="">

                    <input type="radio" value="sex" name="n">男<br>

                    <input type="radio" value="sex" name="n">女  

                </form>

            </td>

        </tr>

        <tr>

            <td align="right">年龄:</td>

            <td>

                <input type="number" min="1" max="100">

            </td>

        </tr>

        <tr>

            <td align="right">籍贯:</td>

            <td>

                <form action="">

                    <select name="" id="">

                        <option value="title">请选择</option>

                        <option value="h">湖北省</option>

                        <option value="n">湖南省</option>

                    </select>

                省/直辖市

                    <select name="" id="">

                        <option value="title">请选择</option>

                        <option value="x">襄阳</option>

                        <option value="w">武汉</option>

                        <option value="c">长沙</option>

                    </select>

                市

                </form>                

            </td>

        </tr>

        <tr>

            <td align="right">爱好:</td>

            <td>

                <form action="">

                    <input type="checkbox" value="habit" name="sing">唱歌

                <input type="checkbox" value="habit" name="dance">跳舞

                <input type="checkbox" value="habit" name="pingpang">乒乓球

                </form>  

            </td>

        </tr>

        <tr>

            <td align="right">个人介绍:</td>

            <td>

                <form>

                    <textarea name="" id="" cols="30" rows="10"></textarea>

                </form>

            </td>

        </tr>

        <tr>

            <td align="right">上传头像:</td>

            <td>

                <input type="file" name="img">

            </td>

        </tr>

        <tr align="center">

            <td colspan="2">

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

                <input type="reset" value="重置">

            </td>

        </tr>

    </form>

    </table>

</body>

</html>



尚新途

1：form标签可以写在table外面个人开发习惯不同导致的

2：像是下面的代码最外层一个写了form标签了，表格里面就不要在嵌套form标签了，否则浏览器会认为这个两个表单导致，重置不生效

8e1e56
15楼

什么时候用form包裹input标签和select标签？代码中有些时候用form包裹了input有些时候又没有包裹select。另外，为什么重置按钮不起作用呢

<tr align="center">

            <td colspan="2">

                <form action="">

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

                    <input type="reset" value="重置">

                </form>

            </td>

      </tr>


尚新途

重置按钮需要你，你的输入框中的有数值的时候才能看出来，form包裹input标签需要看后台的数据格式需求了，有些格式需要from-data，就用from表单包裹去提交

尚新途

image.png

我输入框中填写了数值的诶，重置还是没有清空。

尚新途
<form action="" method="post">
			<input type="text" value=""/>
			<button type="reset">重置</button>
		</form>

用这个代码测试没有问题的

自我检测(5S)