HTML表单标签<form></form>登录窗口和单选框以及下拉栏的制作

文章速览:

HTML基础知识的学习+附加常用HTML标签

HTML中有序列表(<ol><li>)和无序列表(<ul><li>)以及定义列表的使用,以及利用无序列表制作网购按钮

HTML中图片的网页插入以及属性设置

HTML中<a></a>标签的四大功能 必看!必看!!必看!!!

HTML表单标签<form></form>登录窗口和单选框以及下拉栏的制作


登录窗口的制作:



<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>

head>

<body>
    
        <form method="GET"  action="">

                <input type="text">
                <input type="password">

        form>

body>

html>

在这里插入图片描述

form表单标签能够发生数据,能够把前端的数据发送给后端工程师
method有两个属性,分别是get和post,现在使用get,post是后面的Java高级的内容
action是发送的对象,填写后端的模拟地址

注意:
单独写出form 标签是不能完成发送数据的,需要配合其他组件共同使用,这个组件叫input标签,但是这仍然不行,需要在input 标签中加入一个属性 type
其中text代表的是输入框,password叫做密码框

说明:
前面的输入框可以随便写,而且能够显示出来
后面的密码框也能随便输入,但是显示不出来
在这里插入图片描述
将上面的代码稍微改写,使得两个框有提示信息

<body>
    
        <form method="GET"  action="">

                用户名:<input type="text">
                  密码: <input type="password">

        form>

body>

在这里插入图片描述
我们发现,登陆页面的用户名和密码都不在同一行,那么进行修改

<body>
    
        <form method="GET"  action="">

                <p>用户名:<input type="text">p>
                  <p>密码: <input type="password">p>

        form>

body>

HTML表单标签<form></form>登录窗口和单选框以及下拉栏的制作_第1张图片
但是我们发现,输入了信息却还没有提交键,进行修改:

<body>
    
        <form method="GET"  action="">

                <p>用户名:<input type="text">p>
                <p>密码: <input type="password">p>

                <input type="submit">

        form>

body>

登录的组件是input,,写上submit是提交
HTML表单标签<form></form>登录窗口和单选框以及下拉栏的制作_第2张图片
其实上面的提交两个字是可以更改的,只需要增加一个属性即可:

 <input type="submit" value="login">

HTML表单标签<form></form>登录窗口和单选框以及下拉栏的制作_第3张图片
对于上面的代码是不能够提交成功的,因为提交成功必须要有数据名和数据值,缺一不可
对于上面的用户名和密码是数据值,这个时候还缺少数据名
对上面的代码修改,增加数据名:

<body>
    
        <form method="GET"  action="">

                <p>用户名:<input type="text"  name="username">p>
                <p>密码: <input type="password" name="password">p>

                <input type="submit" value="login">

        form>

body>

上面的name属性中的内容可以随便写
HTML表单标签<form></form>登录窗口和单选框以及下拉栏的制作_第4张图片
点击提交怎么才知道提交成功呢?
在这里插入图片描述
在这里插入图片描述
上面的制作基本完成,那么能不能更加完善一下呢?

<body>
    
        <form method="GET"  action="">

                <p>用户名:<input type="text"  name="username" value="请输入用户名">p>
                <p>密码: <input type="password" name="password">p>

                <input type="submit" value="login">

        form>

body>

HTML表单标签<form></form>登录窗口和单选框以及下拉栏的制作_第5张图片
但是,上面的用户名框,当鼠标点击的时候,”请输入用户名“字体并不会消失

 <p>用户名:<input type="text"  name="username" value="请输入用户名" onfocus="this.value=''  ">p>

上面的 onfocus 属性是聚焦的意思,当鼠标点击的时候会发生什么变化,我们想让字体消失,那么就修改成了上面的代码。但是当上面的聚焦完后,当鼠标移走的时候,,原本未聚焦的时候的提示信息会消失,进行修改:

 <p>用户名:<input type="text"  name="username" value="请输入用户名" 
                    onfocus="this.value='' " onblur="请输入用户名" >p>

onblur属性是重新返回未聚焦状态,并提示内容,但是,当已经输入好了用户名,再次返回未聚焦的状态是,原本写的用户名就没有了,所以不够完善,再次进行修改:

 <p>用户名:<input type="text"  name="username" value="请输入用户名" 
                    onfocus="this.value='' " onblur="if(this.value==''){this.value='请输入用户名'}" >p>

解决了上面的问题,但是还有一个问题,那就是当输入好用户名的时候,进行未聚焦用户名框,然后再次聚焦用户名框,用户名框的内容再次消失,那么继续改进:

<p>用户名:<input type="text"  name="username" value="请输入用户名" 
                    onfocus="if(this.value=='请输入用户名'){this.value=''} " onblur="if(this.value==''){this.value='请输入用户名'}" >p>

那么上面的制作就基本完成了,问题也解决了。需要再次完善一下啊:
让未聚焦的时候字体是灰色的:

 <p>用户名:<input type="text"  name="username" value="请输入用户名" style="color: #999;"
                    onfocus="if(this.value=='请输入用户名'){this.value=''} " onblur="if(this.value==''){this.value='请输入用户名'}" >p>

HTML表单标签<form></form>登录窗口和单选框以及下拉栏的制作_第6张图片
但是当聚焦的时候,发现输入的用户名也变成了灰色,继续更改:

 <p>用户名:<input type="text"  name="username" value="请输入用户名" style="color: #999;"
                    onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'} " 
                    onblur="if(this.value==''){this.value='请输入用户名' ; this.style.color='#999'}" >p>

这样整体的登录窗口就制作完成了


单选框的制作:


<body>
    
        <form method="GET"  action="">

                <input type="radio">
                <input type="radio">
                <input type="radio">

                <input type="submit">

        form>

body>

HTML表单标签<form></form>登录窗口和单选框以及下拉栏的制作_第7张图片

说明:单选框的属性是 radio

将上面的代码添加一些人为信息:

<body>
    
        <form method="GET"  action="">
            你喜欢吃哪一个水果?
        <p>   1、苹果    <input type="radio">  p>  
        <p>   2、香蕉    <input type="radio">  p> 
        <p>   3、荔枝    <input type="radio">  p> 

                <input type="submit">

        form>

body>

HTML表单标签<form></form>登录窗口和单选框以及下拉栏的制作_第8张图片
但是,发现上面的并不是单选,而能够多选,下面修改:

<body>
    
        <form method="GET"  action="">
            你喜欢吃哪一个水果?
        <p>   1、苹果    <input type="radio"  name="star">  p>  
        <p>   2、香蕉    <input type="radio"  name="star">  p> 
        <p>   3、荔枝    <input type="radio"  name="star">  p> 

                <input type="submit">

        form>

body>

HTML表单标签<form></form>登录窗口和单选框以及下拉栏的制作_第9张图片
上面的就能进行单项选择了
这是因为name属性就是用来统一他们是在哪一个选择题里面的
把这几个选项的name属性设置为一个统一的值,那么就成了一个选项了

注意:
如果想再写一个选择题的话,下一道题的name属性的值就需要与上面的所有的name属性的值不同

上面的还不能够提交成功,因为有了 name 数据名了,还缺少数据值,更改如下:

<body>
    
        <form method="GET"  action="">
            你喜欢吃哪一个水果?
        <p>   1、苹果    <input type="radio"  name="star"  value="pingguo">  p>  
        <p>   2、香蕉    <input type="radio"  name="star"  value="xiangjiao">  p> 
        <p>   3、荔枝    <input type="radio"  name="star"  value="lizhi">  p>    

                <input type="submit">

        form>

body>

在这里插入图片描述
上面的是单选框,其实只需要稍微的改动就可以变成复选框(小小的正方形框,此时可以多选)

		<p>   1、苹果    <input type="checkbox"  name="star"  value="pingguo">  p>  
        <p>   2、香蕉    <input type="checkbox"  name="star"  value="xiangjiao">  p> 
        <p>   3、荔枝    <input type="checkbox"  name="star"  value="lizhi">  p>    

上面中type属性写 checkbox 就是代表的复选框
HTML表单标签<form></form>登录窗口和单选框以及下拉栏的制作_第10张图片

上面的选择题已经制作成功了,但是现在这个时代,人们多多少少有很大的惰性,为了方便,可以设置一个已经选择好的默认选项,当人们看到这个默认选项就是他想选择的选项的时候,就不需要再去选择,例如,选择性别的时候,只有男女可分,那么默认是男,当是男生进行选择的时候,就不需要再去选择,所哟这个功能还不错,现在来写一下:

<h2>
            选择性别:
        h2>

        man:<input type="radio" name="sex" value="nanren" checked="checked">
        woman:<input type="radio" name="sex" value="nvrens">

上面使用了check’se
HTML表单标签<form></form>登录窗口和单选框以及下拉栏的制作_第11张图片


下拉栏的制作:



<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>

head>

<body>
    
        <h1>请选择你目前的居住地:h1>

        <form method="GET" action="">

        <select>

                <option >北京option>
                <option >上海option>
                <option >天津option>
                <option >山东option>
                <option >山西option>
                <option >河南option>


        select>
        
		<input type="submit">
		
        form>

body>

html>

下拉栏的制作用到的还是form标签
只是使用了select选择标签进行选择
option标签是选择权的意思,后面写的省份名进行选择

HTML表单标签<form></form>登录窗口和单选框以及下拉栏的制作_第12张图片
HTML表单标签<form></form>登录窗口和单选框以及下拉栏的制作_第13张图片
但是要想提交数据,需要数据名与数据值,上面需要数据名:

        <select>

                <option name="shengfen" >北京option>
                <option name="shengfen" >上海option>
                <option name="shengfen" >天津option>
                <option name="shengfen" >山东option>
                <option name="shengfen" >山西option>
                <option name="shengfen" >河南option>


        select>

我们发现,因为这是单选题,这样写了那么多一样的name属性,很不方便,同时又提供了select标签,所以改进:

        <select name="shengfen">

                <option  "">北京option>
                <option  "">上海option>
                <option  "">天津option>
                <option  "">山东option>
                <option  "">山西option>
                <option  "">河南option>


        select>

数据的值就是上面自己写出的省份,所以此时就能够进行提交:
在这里插入图片描述
当然,可以给他们一个value属性值,当写上value的时候,提交就会强制显示value里面的内容,如下:

        <select name="shengfen">

                <option  value="B">北京option>
                <option  value="S">上海option>
                <option  value="T">天津option>
                <option  value="SD">山东option>
                <option  value="SX">山西option>
                <option  value="H">河南option>


        select>

在这里插入图片描述

你可能感兴趣的:(HTML与CSS5网页设计)