HTML 表单 form
1、表单的简介
在现实生活中表单用于提交数据,在网页中也可以使用表单来提交数据,即将本地的数据提交到服务器中。使用form标签来创建一个表单。
form的属性如下:
-
action,表单要提交的服务器地址;
-
method,指定表单的提交方式,常见可选值,get、post;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="#" method='post'>
<!-- 注意在input标签中,如果是输入框,则必须要指定name属性,用于后台服务器获取数据 -->
文本框 <input type="text" name="username"><br>
文本框 <input type="password" name="password" ><br>
<!-- 这里的name必须一样,否则不能实现单选。 -->
<!-- 单选按钮必须指定一个value值,用于最终向服务器提交的值。 -->
<!-- checked 可以将单选按钮设置为默认选择状态。 -->
单选按钮 <input type="radio" name="gender" value="1">
<input type="radio" name="gender" value="2"><br>
<!-- 多选框 -->
多选框 <input type="checkbox" name="hobby" value="basketball">
<input type="checkbox" name="hobby" value="music">
<input type="checkbox" name="hobby" value="song">
<input type="checkbox" name="hobby" value="code"><br>
<!-- 下拉列表 -->
<select name="location" id="location">
<!-- 这里可以给option添加selected,将某一个值默认选中。 -->
<option value="beijign">北京</option>
<option value="shanghai">上海</option>
<option value="hangzhou">杭州</option>
<option value="shenzhen">深圳</option>
</select><br>
<input type="submit" value="提交">
</form>
</body>
</html>
2、表单常用属性
input标签中的常见属性如下:
- autocomplete=“off”,关闭自动补全;
- readonly,将表单设置为只读,数据会提交;
- disabled,将表单设置为禁用,数据不会提交;
- autofocus,设置表单项自动获取焦点,即刷新页面时,自动跳到对应的输入框;
- placeholder,在文本框中设置提示语;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单补充</title>
</head>
<body>
<form action="#">
<input type="text" name="username" id="username" placeholder="用户名"><br>
<input type="password" name="password" id="password" placeholder="密码"><br>
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button" value="按钮">
<br><br>
<!-- 与input的提交按钮一样 -->
<button type="submit">提交</button>
<!-- 与input的重置按钮一样 -->
<button type="reset">重置</button>
<button type="buttom">按钮</button>
</form>
</body>
</html>