HTML 表单及属性

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hi_sir_destroy/article/details/80322759


<form>

form elements

</form>

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等

目录

<input> 元素

单选按钮输入

Input Type: checkbox

提交按钮

Action 属性

Method 属性

<select> 元素(下拉列表)

HTML5 <datalist> 元素(最新)

<textarea> 元素

<button> 元素

输入类型:number

输入限制

输入类型:date

输入类型:datetime-local

输入类型:email

输入类型:search

value 属性

readonly 属性

maxlength 属性

<input> 元素

<input> 元素是最重要的表单元素。<input> 元素有很多形态,根据不同的 type 属性。

text

定义常规文本输入。

radio

定义单选按钮输入(选择多个选择之一)

submit

定义提交按钮(提交表单)

 

单选按钮输入

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

单选按钮允许用户在有限数量的选项中选择其中之一:

实例

<form>

<input type="radio" name="sex" value="male" checked>Male

<br>

<input type="radio" name="sex" value="female">Female

</form>

 

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>

 

提交按钮

<input type="submit"> 定义用于向表单处理程序(form-handler)提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定:将表单信息提交到action

实例

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

Action 属性

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

Method 属性

method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):

<form action="action_page.php" method="GET">

1.如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。

当您使用 GET 时,表单数据在页面地址栏中是可见的:

2.如果表单正在更新数据,或者包含敏感信息(例如密码)。

POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的。

 

 

<select> 元素(下拉列表)

<select> 元素定义下拉列表<option> 元素定义待选择的选项。

 

<select>

<select name="cars">

<option value="volvo">Volvo</option>

 <option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

 

HTML5 <datalist> 元素(最新)

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

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

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

实例

通过 <datalist> 设置预定义值的 <input> 元素:

<form action="action_page.php">

<input list="browsers">

<datalist id="browsers">

   <option value="Internet Explorer">

   <option value="Firefox">

   <option value="Chrome">

   <option value="Opera">

   <option value="Safari">

</datalist>

</form>

 

<textarea> 元素

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

实例

<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.

</textarea>

 

<button> 元素

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

实例

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

输入类型:number

<input type="number"> 用于应该包含数字值的输入字段。

您能够对数字做出限制。

根据浏览器支持,限制可应用到输入字段。

实例

<form>

  Quantity (between 1 and 5):

  <input type="number" name="quantity" min="1" max="5">

</form>

输入限制

这里列出了一些常用的输入限制(其中一些是 HTML5 中新增的):

属性

描述

disabled

规定输入字段应该被禁用。

max

规定输入字段的最大值。

maxlength

规定输入字段的最大字符数。

min

规定输入字段的最小值。

pattern

规定通过其检查输入值的正则表达式。

readonly

规定输入字段为只读(无法修改)。

required

规定输入字段是必需的(必需填写)。

size

规定输入字段的宽度(以字符计)。

step

规定输入字段的合法数字间隔。

value

规定输入字段的默认值。

输入类型:date

<input type="date"> 用于应该包含日期的输入字段。

根据浏览器支持,日期选择器会出现输入字段中。

实例

<form>

  Enter a date before 1980-01-01:

  <input type="date" name="bday" max="1979-12-31"><br>

  Enter a date after 2000-01-01:

  <input type="date" name="bday" min="2000-01-02"><br>

</form>

输入类型:datetime-local

<input type="datetime-local"> 允许用户选择日期和时间(无时区)。

根据浏览器支持,日期选择器会出现输入字段中。

当您填写输入字段时会弹出日期选择器。

</p>

<form action="/demo/demo_form.asp">

  生日(日期和时间):

  <input type="datetime-local" name="bdaytime">

  <input type="submit" value="Send">

</form>

输入类型:email

<input type="email"> 用于应该包含电子邮件地址的输入字段。

<form action="/demo/demo_form.asp">

  E-mail:

  <input type="email" name="email">

  <input type="submit">

</form>

输入类型:search

<input type="search"> 用于搜索字段(搜索字段的表现类似常规文本字段)。

 

<form action="/demo/demo_form.asp">

  <input type="search" name="googlesearch">

  <input type="submit">

</form>

value 属性

value 属性规定输入字段的初始值:

<form action="">

First name:<br>

<input type="text" name="firstname" value="John"> <br>

//第一个框的初始值为John

Last name:<br>

<input type="text" name="lastname">

</form>

readonly 属性

readonly 属性规定输入字段为只读(不能修改):

<form action="">

First name:<br>

<input type="text" name="firstname" value ="John" readonly>

//第一个框不可修改

<br>

Last name:<br>

<input type="text" name="lastname">

</form>

 

size 属性

size 属性规定输入字段的尺寸(以字符计):

实例

<form action="">

 First name:<br>

<input type="text" name="firstname" value="John" size="40">

<br>

 Last name:<br>

<input type="text" name="lastname">

</form>

maxlength 属性

maxlength 属性规定输入字段允许的最大长度:

实例

<form action="">

 First name:<br>

<input type="text" name="firstname" maxlength="10">

<br>

 Last name:<br>

<input type="text" name="lastname">

</form>

 

 


阅读更多 登录后自动展开
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页