乐趣区

关于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,不晓得须要几天。

退出移动版