HTML -- 表单元素1

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>

运行结果:

HTML -- 表单元素1

 

(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>

运行结果:

HTML -- 表单元素1

 

参考:https://www.w3school.com.cn

 

HTML -- 表单元素1

上一篇:【新手可看懂】ubuntu配置appium环境


下一篇:Approximate Search