关于html5:HTML表单

HTML表单

留神要与表格辨别开,表单是,html的动静标签,我后面的博客说的都是动态的页面,在这里表单有以下几种类型:
(1)单行文本框(input(标签))
(2)明码文本框
(3)单选框
(4)复选框
(5)按钮
(6)文件上传
(7)多行文本框(textarea标签)
(8)下拉列表(select标签)
示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>html form标签</title>
</head>
<body>
    <p>示例</p>
    <from>
        <input type="text" value="单行文本框"><br/>
        <textarea>这是一个多行文本框</textarea><br/>
        <select>
            <option>C++</option>
            <option>Python</option>
            <option>Java</option>
        </select>
    </from>
</body>
</html>

实现成果:

form的几个属性:

属性 阐明
name 表单名称,能够用来辨别不同的表单
method 提交形式,有两种http提交形式:get、post,post安全性更好
action 指定提交地址
target 打开方式(与标签相似),只会用到_blank属性
enctype 指定提交的编码方式

input表单

大部分表单都是用input,因为它能够有很多灵便的变动,依据不同的type属性值,它齐全能够适应多种状况下的应用。

<input type="表单类型" />
type属性 作用
text 单行文本框
password 明码文本框
radio 单选框
checkbox 多选框
button或submit或reset 按钮
file 关上文件资源管理器,抉择文件上传

应用示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>html form标签</title>
</head>
<body>
    <p>示例</p>
    <from>
        <input type="text" value="单行文本框"><br/>
        <textarea>这是一个多行文本框</textarea><br/>
        <select>
            <option>C++</option>
            <option>Python</option>
            <option>Java</option>
        </select>
    </from>
    <br>
    <p>-------</p>
    <p>-------</p>
    <p>-------</p>
    <p>-------</p>
    <p>-------</p>
    <p>-------</p>
    <from>
        <input type="text" value="单行文本框的应用" >
        <br>
        <input type="password" value="明码文本框">
        <br>
        <input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女">女
        <br>
        <input type="button" value="按钮">
        <br>
        <input type="file" value="抉择文件">
    </from>
</body>
</html>

上面有具体介绍:
具体介绍
当input标签type=”text和type=”password”时,还有三个罕用属性:

属性 阐明
value 设置文本框的默认值,也就是默认状况下填写的文字
size 设置文本框的长度
maxlength 设置文本框中最多能够输出的字符数,加不加这个属性不会对单行文本框的外观有影响

下拉框:
select属性:mutiple(设置多选)、size(设置下拉列表显示几个选项)
option属性:selected(是否选中)。
按钮也有三种:
(1)一般按钮配合JavaScript来进行各种操作的。type=”button”
(2)提交按钮用来给服务器提交数据的。type=”submit”
(3)重置按钮个别用来革除用户在按钮所属表单中输出的内容。type=”reset”,如果不是按钮所属表单,表中内容与这个按钮无关

input标签之单选框radio

为什么这里用一个独自的题目来写呢?起因是单选框有许多中央要留神。
(第二天补上,六级踊跃备考中,编译原理踊跃温习)
首先语法是这样子的:

<input type="radio" name="组名" value="取值" />取值

这两个属性肯定要设置,同时留神组名name在同一组单选框外面要统一,否则就变成了多个单选框(能够同时抉择多个),<>前面跟的个别与value雷同。
还有一个要留神的中央是还有一个属性叫checked,加上之后就能够让它默认抉择。
语法:

<input type="radio" name="组名" value="取值" checked>取值

而后还有一个叫做复选框的货色(checkbox)属性与单选框统一

最终练习

实现成果:

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>总结练习</title>
</head>
<body>
    账号:<input type="text" value="账号">
    <br>
    明码:<input type="password" value="明码">
    <br>
    性别:
    <input type="radio" name="性别" value="男">男
    <input type="radio" name="性别" value="女">女
    <br>
    会的技能:
    <input type="checkbox" name="技能" value="C">C
    <input type="checkbox" name="技能" value="C++">C++
    <input type="checkbox" name="技能" value="Java">Java
    <input type="checkbox" name="技能" value="Python">Python
    <br>
    集体介绍:
    <!-- <input type="textarea" name="介绍"> -->
    <br>
    <textarea></textarea>
    <br>
    上传简历pdf:
    <br>
    <input type="file">
    <hr>
    <input type="button" value="提交">
</body>
</html>

写在最初:为期12天(看我的博客主页就可以看进去了)把html根底语法学完了😁,这个过程还是比拟轻松的,因为之前学习过Python和C++,所以对这个语言还是十分好承受的,下一步,进军CSS,不晓得须要几天。

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年50元

阿里云限时活动-2核2G-5M带宽-60G SSD-1000G月流量 ,特惠价99元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据