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