likes
comments
collection
share

HTML表单

作者站长头像
站长
· 阅读数 26

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>

实现效果: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)属性与单选框一致

最终练习

实现效果:HTML表单代码:

<!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,不知道需要几天。HTML表单