HTML标签:表单标签
表单:
- 概念:用于采集用户输入的数据的。用于和服务器进行交互。
- form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围
属性:
- action:指定提交数据的URL
- method:指定提交方式
method分类:一共7种,2种比较常用
get:
- 请求参数会在地址栏中显示。会封装到请求行中 (HTTP协议)
- 请求参数大小是有限制的。
- 不太安全。
post:
- 请求参数不会再地址栏中显示。会封装在请求体中 (HTTP协议)
- 请求参数的大小没有限制。
- 较为安全。
表单项中的数据要想被提交:必须指定其name属性
表单项标签:
input:可以通过type属性值,改变元素展示的样式
type属性:
- 要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。
- 一般会给每一个单选框提供value属性,指定其被选中后提交的值
- checked属性,可以指定默认值
- 一般会给每一个单选框提供value属性,指定其被选中后提交的值
- checked属性,可以指定默认值
file:文件选择框
hidden:隐藏域,用于提交一些信息。
label:指定输入项的文字描述信息
注意: label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。
按钮:
select: 下拉列表
- 子元素:option,指定列表项 属性:seleceted(默认选择)
textarea:文本域
cols:指定列数,每一行有多少个字符
rows:默认多少行。
代码演示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <label for="username"> 用户名 </label>:<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
密码:<input type="password" name="password" placeholder="请输入密码"><br>
性别:<input type="radio" name="gender" value="male" > 男
<input type="radio" name="gender" value="female" checked> 女
<br>
爱好:<input type="checkbox" name="hobby" value="shopping"> 逛街
<input type="checkbox" name="hobby" value="java" checked> Java
<input type="checkbox" name="hobby" value="game"> 游戏<br>
图片:<input type="file" name="file"><br>
隐藏域:<input type="hidden" name="id" value="aaa"> <br>
<!--HTML5-->
取色器:<input type="color" name="color"><br>
生日:<input type="date" name="birthday"> <br>
生日:<input type="datetime-local" name="birthday"> <br>
邮箱:<input type="email" name="email"> <br>
年龄:<input type="number" name="age"> <br>
省份:<select name="province">
<option value="">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected>陕西</option>
</select><br>
自我描述:
<textarea cols="20" rows="5" name="des"></textarea>
<br>
<input type="submit" value="登录" >
<input type="button" value="一个按钮" ><br>
<input type="image" src="img/regbtn.jpg">
|
赏
谢谢你请我吃糖果
支付宝
微信