Web入门之VScode基本操作，文本框、输入框、单选框、多选框、列表、插入图片、插入按钮及跳转网页和页面_vscode添加输入框和按钮

作者：小小林熬夜学编程 | 2024-03-28 09:09:02

踩

vscode添加输入框和按钮

Web入门之VScode基本操作，表单、输入框、单选框、多选框、列表、插入图片、插入按钮及跳转网页和页面

已经在VSCode中新建了.html项目，下面我们来进行一些基本的简单操作，关于如何新建项目，可以查看之前的文章哦。
https://blog.csdn.net/weixin_46570668/article/details/112505505.

表单

首先我们来看一些标签的用法
< form>
< form> 标签用于创建供用户输入的HTML表单。可包含一个或多个如下表单元素：
< input>
< textarea>
< button>
< select>
< option>
< optgroup>
< fieldSet>
< label>
< fieldset>
< fieldset>标签用于从逻辑上将表单中的元素组合起来，会在相关表单元素周围绘制边框
< legeng>标签为fieldset元素定义标题
举例：
例如如下代码：（使用的是上次的文件）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>基本操作</title>
    </head>
    <body>
        <form>
            <fieldset>
              <legend>个人信息:</legend>
            </fieldset>
          </form> 
        
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

我们右击index.html选择view in Browser，效果如下：
在这里插入图片描述

输入框

接下来我们开始在表单里面插入输入框，首先来了解一下< input>标签
< input>
< input>标签规定了用户可以在其中输入数据的输入字段，在< form>中使用，用来声明允许用户输入数据的input控件，输入字段可通过多种方式改变，取决于tupe属性。
type的属性包括：button,checkbox,color,date,datetime,datetime-local,emial,file,hidden,image,month,number,password,radio,range,reset,search,submit,tel,text,time,url,week
我们在表单中加入两个text类型的input控件，代码如下：
< br>表示换行

<form>
            <fieldset>
              <legend>个人信息:</legend>
              姓名: <input type="text" size="30"><br>
              学号: <input type="text" size="30"><br>
            </fieldset>
          </form> 
1
2
3
4
5
6
7

好，一起来看一下效果：
在这里插入图片描述

单选框和多选框

单选和多选的实现也是通过input控件，与上面输入框类似，只需要改变type的类型就可以了。
代码如下：

<form>
            <fieldset>
              <legend>个人信息:</legend>
              姓名: <input type="text" size="30"><br>
              学号: <input type="text" size="30"><br>
              <input type="radio"  name="sex" value="male"/>男<br>
              <input type="radio"  name="sex" value="female"/>女<br>
              <input type="checkbox" name="hobby"/>唱歌<br>
              <input type="checkbox" name="hobby"/>跳舞<br>
            </fieldset>
          </form>
1
2
3
4
5
6
7
8
9
10
11

一起来看一下效果吧

在这里插入图片描述

列表

接下来我们搞一个学期的列表选择框，众所周知，上海大学有四个学期，因此我们搞一个有四个学期春夏秋冬可供选择的选择框。
代码如下：

<form >
            <select name="学期">
                <option value="春">春季学期</option>
                <option value="夏">夏季学期</option>
                <option value="秋">秋季学期</option>
                <option value="冬">冬季学期</option>
            </select>
        </form>
1
2
3
4
5
6
7
8

来看看效果怎么样：

在这里插入图片描述

图片

插入图片这个操作与之前的很多语言都类似。首先我们去网上下载一个好看可爱的图片到我们现在的文件夹里，给它命名一个好记的名字，接下来在我们想插入的地方写下一行代码：

<form>
            <fieldset>
              <legend>个人信息:</legend>
              <img src="8.png" /><br>
              姓名: <input type="text" size="30"><br>
              学号: <input type="text" size="30"><br>
              <input type="radio"  name="sex" value="male"/>男<br>
              <input type="radio"  name="sex" value="female"/>女<br>
              <input type="checkbox" name="hobby"/>唱歌<br>
              <input type="checkbox" name="hobby"/>跳舞<br>
            </fieldset>
          </form> 
1
2
3
4
5
6
7
8
9
10
11
12

我写在了第一个表单的标题下面，是一个可爱的猫猫头表情，下面我们来看看效果如何
在这里插入图片描述一个非常可爱的猫猫头就出现啦，现在大部分操作就完成了，下面我们来看看页面跳转。

按钮

按钮的实现非常简单，还是我们熟悉的< input>控件，只要将类型改为"button"就可以啦。
代码如下：

<input type="button"  value="按钮"/><br>
1

现在它是一个毫无用处的按钮，接下来我们想让它能跳转到指定网页，比如说百度，那我们给它加一个onClick就可以啦。

<input type="button"  value="跳转百度" onclick="javascrtpt:window.location.href='http://www.baidu.com/'"/><br>  
1

那我们试着跳一下。
在这里插入图片描述点击“跳转百度”按钮，跳转成功。
接下来我们不想跳转到别人的网页上去，我们想跳转到我们的下个网页上，这个也非常简单，只要将跳转的地址改为我们下一页地址就好啦。
首先先新建一个html文件，这个就和新建index.html一模一样，然后输入名字“next.html”
接下来我们在index.html中输入如下代码：

<input type="button"  value="跳转下一个界面" onclick="javascrtpt:window.location.href='next.html'"/><br>
1

为了好看，我们在next.html也就是要跳转的页面中也插入一张猫猫头表情，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>下一个页面</title>
    </head>
    <body>
        <img src="10.png" /><br>    
    </body>
</html>
1
2
3
4
5
6
7
8
9
10

现在我们来看看效果吧
在这里插入图片描述我们点击“跳转下一个界面”按钮，哦豁，一个非常可爱的猫猫头，跳转成功！

完整代码

// index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>基本操作</title>
    </head>
    <body>
        <form>
            <fieldset>
              <legend>个人信息:</legend>
              <img src="8.png" /><br>
              姓名: <input type="text" size="30"><br>
              学号: <input type="text" size="30"><br>
              <input type="radio"  name="sex" value="male"/>男<br>
              <input type="radio"  name="sex" value="female"/>女<br>
              <input type="checkbox" name="hobby"/>唱歌<br>
              <input type="checkbox" name="hobby"/>跳舞<br>
            </fieldset>
          </form> 
          <form >
            <select name="学期">
                <option value="春">春季学期</option>
                <option value="夏">夏季学期</option>
                <option value="秋">秋季学期</option>
                <option value="冬">冬季学期</option>
            </select>
        </form>
        <input type="button"  value="按钮"/><br>
        <input type="button"  value="跳转百度" onclick="javascrtpt:window.location.href='http://www.baidu.com/'"/><br>
        <input type="button"  value="跳转下一个界面" onclick="javascrtpt:window.location.href='next.html'"/><br>
    </body>
</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

//next.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>下一个页面</title>
    </head>
    <body>
        <img src="10.png" /><br>    
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/329119