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