关于html5:HTML表单

44次阅读

共计 2711 个字符，预计需要花费 7 分钟才能阅读完成。

留神要与表格辨别开，表单是，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，因为它能够有很多灵便的变动，依据不同的 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 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，不晓得须要几天。

正文完