码迷,mamicode.com
首页 > Web开发 > 详细

HTML表单02

时间:2020-03-12 14:35:48      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:ref   密码字段   page   页面   for   opera   按钮   mouse   style   

HTML 表单元素

描述 HTML 表单元素。


 

<input> 元素

最重要的表单元素是 <input> 元素。

<input> 元素根据不同的 type 属性,可以变化为多种形态。

<select> 元素(下拉列表)

<select> 元素定义下拉列表:

列表通常会把首个选项显示为被选选项。

能够通过添加 selected 属性来定义预定义选项。

 1 <html>
 2 <body>
 3 
 4 <form action="/demo/demo_form.asp">
 5 <select name="cars">
 6 <option value="volvo">Volvo</option>
 7 <option value="saab">Saab</option>
 8 <option value="fiat">Fiat</option>
 9 <option value="audi">Audi</option>
10 </select>
11 <br><br>
12 <input type="submit">
13 </form>
14 
15 </body>
16 </html>

<textarea> 元素

<textarea> 元素定义多行输入字段(文本域):

1 <textarea name="message" rows="10" cols="30">
2 The cat was playing in the garden.
3 </textarea>

<button> 元素

<button> 元素定义可点击的按钮:

<button type="button" onclick="alert(‘Hello World!‘)">自定义按钮</button>

HTML5 表单元素

HTML5 增加了如下表单元素:

  • <datalist>
  • <keygen>
  • <output>

HTML5 <datalist> 元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

 1 <form action="action_page.php">
 2 <input list="browsers">
 3 <datalist id="browsers">
 4    <option value="Internet Explorer">
 5    <option value="Firefox">
 6    <option value="Chrome">
 7    <option value="Opera">
 8    <option value="Safari">
 9 </datalist> 
10 </form>

输入类型:text

<input type="text"> 定义供文本输入的单行输入字段:

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

First name:


Last name:

输入类型:password

<input type="password"> 定义密码字段:

<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw">
</form> 

User name:


User password:

注释:password 字段中的字符会被做掩码处理(显示为星号或实心圆)。


输入类型:submit

<input type="submit"> 定义提交表单数据至表单处理程序的按钮。

表单处理程序(form-handler)通常是包含处理输入数据的脚本的服务器页面。

在表单的 action 属性中规定表单处理程序(form-handler):

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

First name:


Last name:




如果省略了提交按钮的 value 属性,那么该按钮将获得默认文本:

Input Type: radio

<input type="radio"> 定义单选按钮

1 <form>
2 <input type="radio" name="sex" value="male" checked>Male
3 <br>
4 <input type="radio" name="sex" value="female">Female
5 </form>

Male

Female

Input Type: checkbox

<input type="checkbox"> 定义复选框

复选框允许用户在有限数量的选项中选择零个或多个选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

I have a bike

I have a car

Input Type: button

<input type="button> 定义按钮

<html>
<body>

<button type="button" onclick="alert(‘Hello World!‘)">Click Me!</button>

</body>
</html>


HTML表单02

标签:ref   密码字段   page   页面   for   opera   按钮   mouse   style   

原文地址:https://www.cnblogs.com/TianLiang-2000/p/12468688.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!