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