HTML 表单用于搜集不同类型的用户输入。
一、<form> 标签
<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
表单用于向服务器传输数据。
(注释:form 元素是块级元素,其前后会产生折行。<input> 元素是最重要的表单元素。)
常见<input>元素的type属性值
类型 | 描述 |
---|---|
text | 定义常规文本输入。 |
password | 定义密码输入 |
submit | 定义提交按钮(提交表单) |
radio | 定义单选按钮输入(选择多个选择之一) |
checkbox | 定义复选框 |
二、input元素的type属性值
(1)文本输入
<input type=‘text‘>用于定义文本输入的单行输入字段。
<html> <body> <!-- This is a comment --> <form> First name:<br /> <input type=‘text‘ name=‘firstname‘> <br /> Last name:<br /> <input type=‘text‘ name=‘lastname‘> </form> </body> </html>
运行结果:
First name: Last name:
(2)密码输入
<input type="password"> 定义密码字段。
password 字段中的字符会被做掩码处理(显示为星号或实心圆)。
<html>
<body>
<!-- 表单处理程序在action属性中指定 -->
<form action="action_page.php">
Username:<br/>
<input type=‘text‘ name=‘username‘><br/>
Password:<br/>
<input type=‘password‘ name=‘psw‘><br/>
<input type="submit" value="提交查询">
</form>
</body>
</html>
运行结果:
(3)提交按钮
<input type="submit"> 定义用于向表单处理程序(form-handler)提交表单的按钮。
<html>
<body>
<!-- 表单处理程序在action属性中指定 -->
<form action=‘action_page.php‘>
First name:<br />
<!--value值即为默认填写值-->
<input type=‘text‘ name=‘firsname‘ value=‘Micky‘>
<br />
Last name:<br />
<input type=‘text‘ name=‘lastname‘ value=‘Mouse‘>
<br />
<input type=‘submit‘ value=‘提交‘>
</form>
</body>
</html>
运行结果:
First name:
Last name:
提交
|
action 属性:定义在提交表单时执行的动作。如果省略 action 属性,则 action 会被设置为当前页面。
method 属性:规定在提交表单时所用的 HTTP 方法(默认GET)。
name 属性:规定 input 元素的名称,用于对提交到服务器后的表单数据进行标识。
<form action="action_page.php" method="POST">
PS:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
(4)单选按钮输入
<input type="radio"> 定义单选按钮。
<html> <body> <!-- This is a comment --> <form> <input type=‘radio‘ name=‘sex‘ value=‘male‘ checked>Male <!--checked设置预先选定的按钮,即默认选定的按钮--> <br /> <input type=‘radio‘ name=‘sex‘ value=‘female‘>Female </form> </body> </html>
运行结果:
Male Female
(5)checkbox复选框
<input type="checkbox"> 定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。
<html> <body> <!-- 表单处理程序在action属性中指定 --> <form action="action_page.php"> <input type=‘checkbox‘ name=‘cat‘ value=‘CAT‘>Cat <br/> <input type=‘checkbox‘ name=‘dog‘ value=‘DOG‘>Dog </form> </body> </html>
运行结果:
参考:https://www.w3school.com.cn