HTML自学笔记-4(表单)

最新推荐文章于 2021-07-02 23:27:14 发布

季沐晴

最新推荐文章于 2021-07-02 23:27:14 发布

阅读量295

点赞数

本文链接：https://blog.csdn.net/weixin_45901806/article/details/107923024

版权

本篇博客来记录一下表单标签和一个练习题，表单在我们的生活中也是非常常见的了，例如注册一些软件填的个人信息的网页，或者网络上办理一些东西都需要填写信息，而填写信息的界面我们就叫做表单

格式：

<form>
    <表单元素>
</form>

表单中也有很多标签和属性，下面来学习吧

一、input标签

input标签中有一个type属性，type属性的取值不同就决定了input标签的功能和外观。

1.明文输入框

给输入框设置默认值

2.暗文输入框（输入密码等隐私信息）

给输入框设置默认值

3.单选框

默认情况下选项不会互斥，就是单选框默认情况下可以多选，想要互斥必须给每一个单选框标签设置一个name属性，并且name属性还必须一致

例如：

性别：

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

浏览器打开后显示如图

给输入框设置默认值，只需要给input标签添加一个checked属性

<input type="radio" name="sex" checked=“checked”>女

4、多选框（checkbox）

格式例如；

体育特长：
篮球<input type="checkbox">
排球<input type="checkbox">
足球<input type="checkbox">
游泳<input type="checkbox">

浏览器打开后显示如图

默认值：加checked=“checked”

5、创建按钮

(1)\格式：

(2)\这样创建的按钮样式可能比较单一，因此我们还有图片按钮

（3）、重置按钮（用来清空表单中的数据）

重置按钮默认的按钮标题为（重置），可以通过value属性更改

（4）、提交按钮（将表单中的数据提交到远程服务器）

若要将表单中的数据提交到远程服务器，需要满足两个条件

一要告诉表单需要提交到哪一个服务器，可以通过form标签的action属性告诉表单

例：<form action="www.baidu.com">

二要告诉表单，表单中的那些数据需要提交，在数据中加入name属性

（5）、隐藏线

6、Label标签（文字和输入框的绑定）

就是说使用了lable标签可以让文字和输入框绑定在一起，点击文字时对应的输入框聚焦

绑定格式

（1）、将文字利用lable标签包裹起来

（2）、给输入框添加一个Id属性

（3）、在lable标签中通过for属性和输入框中的Id标签进行绑定即可

<lable for="account">账号：</lable><input type="text" id="account">

上面是常用的一种方法，下面是一种简单的方法，不过有一定的局限

<lable>
    账号：<input type="text">
</lable>

局限就是用第一种方法可以任意的绑定文字与输入框，而这种方法只能绑定对应的文字和输入框

7、datalist标签（了解）

用来给输入框绑定待选项

格式：

（1）、搞一个输入框

（2）、写一个datalist列表

（3）、给datalist列表添加一个Id属性

（4）、给输入框添加一个list属性，将datalist的Id对应的值赋给list属性即可

例如：

请输入你喜欢的水果：<input type="text" list="fruit">
<datalist id="fruit">
    <option>苹果</option>
    <option>香蕉</option>
    <option>橘子</option>
</datalist>

浏览器打开如图：

8、HTML5 input新增标签（了解）

邮箱：<input type="email">
域名：<input type="url">
电话号码：<input type="number">
时间：<input type="date">
颜色:<input type="color">

9、select标签（下拉列表）

<select>
    <option>  </option>
    <option>  </option>
</select>

加默认值

optgroup标签

例如：

<select>
    <optgroup label="信息学院">
    <option>计算机科学与技术</option>
    <option>网络工程</option>
    <option>数学</option>
    <option>电子</option>
    <option>计开发</option>
    </optgroup>
    <optgroup label="经管学院">
        <option>会计</option>
        <option>金融</option>
    </optgroup>
</select>

浏览器打开后是这样的

10、textarea标签(文本域)

文本域用来定义一个多行的输入框

格式：例如

自我介绍：<textarea cols="30" rows="30"></textarea>

二、一个简单的学生信息注册页面

刚开始拿到这个作业的时候，我自己还没有学到表单，就傻不拉几的用了表格，关键自己一直不知道错了哈哈哈太搞笑了

下面是我做的浏览器打开之后的界面（看着是不是没有什么问题？其实我写的代码可以说是完全错误，因为当时我自己还没有学习到表单，想当然的用了表格，而且很多标签属性都用错了）

错误代码上一下，（不要看不要看不要看）（我想自己留个记录）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息注册界面</title>
    <style type="text/css">
        table tr:hover{
            background: chartreuse;
        }
    </style>
</head>
<body bgcolor="#f0f8ff">
    <table width="600" align="center">
        <caption><h1>学生信息注册页面</h1></caption>
        <tr>
            <td>姓名</td>
            <td>
                <input type="text">
            </td>
            <br/>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                男<input type="radio"name="sex">
                女<input type="radio"name="sex">
            </td>
        </tr>
        <tr>
            <td>出生日期</td>
            <td>
                <input type="text"> 按照格式yyy-mm-dd写
            </td>
        </tr>
        <tr>
            <td>学校</td>
            <td>
                <input type="text"> 
            </td>
        </tr>
        <tr>
            <td>专业</td>
            <td>
                <select>
                    <option>计算机科学与技术</option>
                    <option>网络工程</option>
                    <option>数学</option>
                    <option>电子</option>
                    <option>计开发</option>
                    <option>其它</option>>
                </select>
            </td>
        </tr>
       <tr>
           <td>体育特长</td>
           <td>
               篮球<input type="checkbox">
               排球<input type="checkbox">
               足球<input type="checkbox">
               游泳<input type="checkbox">
           </td>
       </tr>
        <tr>
            <td>上传照片</td>
            <td>
                <input type="text">
                <button onclick="window.open('https://www.baidu.com/s?tn=80035161_2_dg&wd=%E7%99%BE%E5%BA%A6')">浏览</button>
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td>
                <input type="password">
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td>
               <textarea cols="20" rows="10">
               </textarea>
                <button onclick="window.open('https://www.baidu.com/s?tn=80035161_2_dg&wd=%E7%99%BE%E5%BA%A6')">确定</button>
                <button onclick="window.open('reset')">取消</button>
            </td>
        </tr>
    </table>
</body>
</html>

好的，现在我们先来分析一下这个页面

（1）、首先这是一个表单

（2）、第二行性别会用到一个单选按钮，第六行体育特长会用到一个多选按钮

（3）、第五行专业会用到下拉列表

（4）、一般情况下密码为不可见

（5）、自我介绍会用到文本域

（6）、要用到创建按钮

下面来一下我改正之后的代码及浏览器打开之后的图片（做的也没有很好看，至于样式、对齐方式之类的可以自己改一下）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息注册页面</title>
</head>
<body bgcolor="#7fffd4">
<h1 align="center">学生信息注册页面</h1>
<form>
    <p>
        姓名：<input type="text">
    </p>
    <p>
        性别：<input type="radio" name="sex">男
        <input type="radio" name="sex">女
    </p>
    <p>
        出生日期：<input type="date">
    </p>
    <p>
        学校：<input type="text">
    </p>
    <p>
        专业：
        <select>
            <option>计算机科学与技术</option>
            <option>网络工程</option>
            <option>数学</option>
            <option>电子</option>
            <option>计开发</option>
        </select>
    </p>
    <p>
        体育特长：
        篮球<input type="checkbox">
        排球<input type="checkbox">
        足球<input type="checkbox">
        游泳<input type="checkbox">
    </p>
    <p>
       上传照片：<input type="text">
        <button onclick="window.open('https://www.baidu.com/s?tn=80035161_2_dg&wd=%E7%99%BE%E5%BA%A6')">浏览...</button>
    </p>
    <p>
        密码：<input type="password">
    </p>
    <p>
        自我介绍：<textarea cols="30" rows="20"></textarea>
    </p>
    <p>
        <button onclick="window.open('https://www.baidu.com/s?tn=80035161_2_dg&wd=%E7%99%BE%E5%BA%A6')">提交</button>
        <input type="reset" value="取消">
    </p>
</form>

</body>
</html>

季沐晴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML自学笔记-4(表单)

三、一个简单的学生信息注册页面先来分析一下这个页面（1）、首先这是一个表单（2）、第二行性别会用到一个单选按钮，第六行体育特长会用到一个多选按钮（3）、第五行专业会用到下拉列表（4）、一般情况下密码为不可见（5）、自我介绍会用到文本域（6）、要用到创建按钮下面是我做的浏览器打开之后的界面（看着是不是没有什么问题？其实我写的代码可以说是完全错误，因为当时我自己还没有学习到表单，想当然的用了表格，而且很多标签属性都用错了）错误代码上一下，（不要看不要看不要看...
复制链接

扫一扫