likes
comments
collection
share

HTML表单

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

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表单

转载自:https://segmentfault.com/a/1190000041917462
评论
请登录