HTML表格和表单(1)

最新推荐文章于 2024-08-23 10:53:05 发布

元气啵啵

最新推荐文章于 2024-08-23 10:53:05 发布

阅读量328

点赞数 10

文章标签： html 前端服务器

本文链接：https://blog.csdn.net/2301_79795370/article/details/135612185

版权

表单标签

<body>
<form >
form elements
</form>
</body>

form表单的属性

action="url"：请求地址，指定form表单向何处发送数据。

name="login"：作用是给表单起名，为了便于我们操作。

enctype ="string"：规定在发送表单数据之前，如何对表单数据进行编码。通常在使用文件上传时，我们会enctype=“multipart/form-data”，以二进制传输。

method ="get/post"：指定表单以何种方式发送到指定的服务器程序，该属性定义浏览器将表单中的数据提交给服务器处理程序的方式。关于method的取值，最常用的是get和post。

表单域

要提交数据的表单域必须加name属性。

<form action="login.jsp">
兴趣爱好：篮球 <input type="checkbox" name="like1" value="1" checked>
足球 <input type="checkbox" name="like2" value="2">
游泳 <input type="checkbox" name="like3" value="3">
跑步 <input type="checkbox" name="like4" value="4">
</form>
1
2
3
4
5
6
type="file" 文件上传

类型为file时，默认为单文件上传。

multiple="multiple" 设置为多文件上传。

<form action="login.jsp">
<input type="file" name="file" multiple="multiple">
</form>
1
2
3
type="hidden" 隐藏字段

隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。

<form action="login.jsp">
<input type="hidden" name="hidden" value="123">
</form>
1
2
3

下拉列表<select>

<select> 元素定义下拉列表，<option>元素定义待选择的选项。列表通常会把首个选项显示为被选选项，通过添加 selected 属性来定义预定义选项。

<form action="login.jsp">
选择您喜欢的水果：
<select name="select">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>

<option selected value="durian">榴莲</option>
</select>
</form>
1
2
3
4
5
6
7
8
9
单选按钮、复选框默认选中用：checked属性。

下拉列表使用：selected属性。

使用size属性设置下拉列表展开，使用multiple属性设置多选。

<form action="login.jsp">
<select name="select" size="4" multiple id="">
<option value="1">重庆</option>
<option value="2">武汉</option>
<option value="3">北京</option>
<option value="4">上海</option>
</select>
<input type="submit">
</form>
1
2
3
4
5
6
7
8
9

<textarea> 文本域
<textarea> 元素定义多行输入字段（文本域）

cols：规定文本区内的可见宽度。

rows：规定文本区内的可见行数。

<form>
<textarea name="text" cols="50" rows="10"></textarea>
</form>
1
2
3
文本域可以添加placeholder属性，用于设置输入字段预期值的提示信息。

2.4 <label> 标签
label是input的描述，它本身不会有特殊效果，但它和其它input标签使用可以提升用户的使用体验，用户不用非得点击到按钮，而是点击文字即可选中，如“记住密码”。

通过label的for指向按钮的id来绑定，for和id属性的值要相同。

<form action="login.jsp">
<label for="userName">请输入用户名:</label>
<input type="text" id="userName">
</form>
<form action="login.jsp">
性别：
<label for="man">男：</label>
<input type="checkbox" id="man">
<label for="woman">女：</label>
<input type="checkbox" id="woman">
</form>
1
2
3
4
5
6
7
8
9
10
11

表单按钮

type="reset" 重置按钮

重置按钮会清除表单中的所有数据。

value="重置"设置重置按钮上显示的文字。

<form action="login.jsp">
用户名：<input name="userName" type="text">
性别：男 <input name="sex" checked="checked" type="radio" value="1">
女 <input name="sex" type="radio" value="2">
<input type="reset" value="重置">
</form>
1
2
3
4
5
6
type="submit" 提交按钮

type="submit" 定义提交按钮。提交按钮用于向服务器发送表单数据，数据会发送到表单的 action 属性中指定的页面。

value="提交"设置提交按钮上显示的文字。

<form action="login.jsp">
用户名：<input name="userName" type="text">
性别：男 <input name="sex" checked="checked" type="radio" value="1">
女 <input name="sex" type="radio" value="2">
<input type="submit" value="提交">
</form>
1
2
3
4
5
6
type="button" 普通按钮

button类型的只是一个普通的按钮，而submit有一个提交的作用，在没有加js代码的情况下，button只是个装饰。

<form action="login.jsp">
<input type="button" value="按钮">
</form>
1
2
3
type="image" 提交按钮

元气啵啵

关注

10
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
HTML表格和表单(1)

cols：规定文本区内的可见宽度。rows：规定文本区内的可见行数。<form></form>123文本域可以添加placeholder属性，用于设置输入字段预期值的提示信息。2.4 <label> 标签label是input的描述，它本身不会有特殊效果，但它和其它input标签使用可以提升用户的使用体验，用户不用非得点击到按钮，而是点击文字即可选中，如“记住密码”。通过label的for指向按钮的id来绑定，for和id属性的值要相同。
复制链接

扫一扫