HTML笔记三

笔记三主要记录一些表单元素,当然了,首先要知道什么是表单。

表单

表单就是网页上面可以填写的东西,包括但不限于文本框、勾选框、下拉菜单。主要功能是可以让用户向服务器发送信息。

<form>标签之间的就是表单内容,表单标签应该没有渲染效果吧……表单可以设置属性来控制提交信息的方式,基础的属性有method action,太高级的我也不知道了。

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
36
<!--表单,但是不懂什么意思诶-->
<form action="https://how2j.cn/study/login.jsp">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
<br>

<!--get方法,可以在浏览器的地址栏看到提交的参数-->
<form method="get" action="https://how2j.cn/study/login.jsp">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
<br>

<!--post方法,看不到数据,提交二进制数据,比如上传文件,必须采用post方式-->
<form method="post" action="https://how2j.cn/study/login.jsp">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

<!--
get和post的区别
get
是form默认的提交方式
如果通过一个超链访问某个地址,是get方式
如果在地址栏直接输入某个地址,是get方式
提交数据会在浏览器显示出来
不可以用于提交二进制数据,比如上传文件
post
必须在form上通过 method="post" 显示指定
提交数据不会在浏览器显示出来
可以用于提交二进制数据,比如上传文件
-->

get和post什么的貌似又和http有关系了,不懂。

文本框和文本域

其实表单元件标签名好像都是<input>主要还是靠设置type属性来决定元件类型的。当然文本域不是。

文本框<input type="text>"
文本域<textarea>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--文本输入框-->
<input type="text">
<br>

<!--设置长度,size="10"-->
<input type="text" size="10">
<br>

<!--初始值,value="初始值"-->
<input type="text" value="初始值">
<br>

<!--背景灰色文字,placeholder="请输入账号"-->
<input type="text" placeholder="请输入账号">
<br>

<!--密码框,输入的数据会显示为星号-->
<!--type和文本框不一样-->
<!--其他和文本框一样吧-->
<input type="password">

<!--文本域,可以指定宽度和高度-->
<textarea name="文本域" id="233" cols="30" rows="10">这是默认的内容</textarea>

中间混了个密码框,其实区别不大。当然把密码框单独指定一个type而不是做成文本框的附属肯定是安全考虑。

单选框和复选框

可以说很常见的两种元素了,现在网页用得也多。
令人回想起被调查问卷支配的恐惧

单选框<input type="radio">
复选框<input type="checkbox">

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--单选框-->
<!--name要相同,value是选中后代表的值,checked默认选中-->
选项1<input type="radio" name="activity" value="option1"> <br />
选项2<input type="radio" name="activity" value="option2" checked="checked"> <br />
选项3<input type="radio" name="activity" value="option3"> <br />
选项4<input type="radio" name="activity" value="option4"> <br />

<!--复选框-->
<!--name不要相同,value是选中后代表的值,checked默认选中-->
选项1<input type="checkbox" name="activity1" value="option1"> <br />
选项2<input type="checkbox" name="activity2" value="option2" checked="checked"> <br />
选项3<input type="checkbox" name="activity3" value="option3"> <br />
选项4<input type="checkbox" name="activity4" value="option4"> <br />

下拉菜单

也很常见吧,经常用这个选生日

类似列表,要使用两种标签:
下拉菜单<select>
菜单选项<option>

1
2
3
4
5
6
7
8
<!--用size指定大小,可以多显示一些选项-->
<select name="下拉菜单2" id="666" size="4">
<option value="1">选项1</option>
<!--设置已选择-->
<option value="2" selected=true>选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
</select>

还可以用multiple属性设置多选,不过一般没有人做多选的下拉菜单啊,不符合操作习惯。

按钮

大家最喜欢按的东西,特别是上面写着“确认”的时候。

其实有不止一种写法,有些区别需要注意。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--普通按钮-->
<input type="button" value="一个按钮">

<!--这里给了一个表单便于说明submit和reset的作用-->
<form action="https://how2j.cn/study/login.jsp" method="get">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<!--提交按钮,配合表单使用,放在表单里面-->
<input type="submit" value="登陆">
<!--重置按钮,重设表单内的所有选项-->
<input type="reset" value="重置">
</form>

<!--标签按钮-->
<button>按钮</button>
<!--可以和别的元素嵌套-->
<button><img src="https://how2j.cn/example.gif"/></button>
<!--type="submit"属性可以提交表单,相当于之前的submit按钮,reset同理-->
<button type="submit">登陆</button>

图像与表单

好像在表单里面加个图片,点图片就可以提交表单,也不是很懂这个逻辑是怎么回事。

1
2
3
4
5
6
<form action="https://how2j.cn/study/login.jsp">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<!--似乎点击图片也能提交表单-->
<input type="image" src="https://how2j.cn/example.gif">
</form>