HTML 18.3 表单元素input的输入属性type

HTML 18.3 表单元素input的输入属性type

 

只有表单元素inpu和bottont才有输入属性。

 

一．文本：type=“text”

<form>

  First name:<br />

  <input type="text" name="firstname" /><br />

  Last name:<br />

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

</form>

结果：

 

注1：<input type="text" name="lastname" />结果生成一个框：

注2：文本字段的默认宽度是20个字符。

注3：表单本身并不可见。在浏览器中看起来是这样的：

First name:

 

 Last name:

 

 

二．密码字段：text=“password”，定义密码字段

<form>

  User name:<br>

  <input type="text" name="username" />><br />

  User password:<br>

  <input type="password" name="psw" />

</form>

结果：

 

 

三．单选按钮：text=“radio”，单选按钮允许用户在有限数量的选项中选择其中之一。

<form>

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

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

</form>

结果：

 

注1：<input type="radio" name="sex" value="female" />结果生成一个框：

注2：表单本身并不可见。在浏览器中看起来是这样的：

Male

Female

注3：checked的作用，设置初始状态，默认此按钮已打钩。

例如1，无checked：

<form>

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

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

</form>

结果：

 

例如2，多个checked：

<form>

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

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

</form>

结果：最后的一个生效，应该只有一个checked

 

 

四．复选框checkbox

<form action="action_page.php">

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

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

</form>

结果：

 

加上checked，结果如下

<form action="action_page.php">

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

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

</form>

 

 

五．提交按钮：type=“submit”submit [səb'mɪt]提交

定义用于向表单处理程序（form-handler）提交表单的按钮。

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

表单处理程序在表单form的 action 属性中指定。

<form action=”action_page.php”>

  <input type=”submit”value=”Submit”/>

</form>

结果：

 

<form action=”action_page.php”>

  <input type=”submit”value=”提交提交提交”/>

</form>

结果：

 

 

六．定义按钮 button

<form>

  <input type="button" οnclick="alert('Hello World!')" value="Click Me!" />

</form>

结果：

 

与用表单元素button（ ['bʌtn]按钮，纽扣），定义可点击的按钮比较：

<form>

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

</form>

结果：

  

注：如果在 HTML表单中使用 <button>元素，不同的浏览器可能会提交不同的按钮值。请使用 <input>在HTML 表单中创建按钮。

 

七．其他

file	定义输入字段和 "浏览"按钮，供文件上传。 <input type="file" />
hidden	定义隐藏的输入字段。 <input type="hidden" name="country" value="Norway" />
image	定义图像形式的提交按钮。必须把 src 属性 和 alt 属性 与 <input type="image"> 结合使用。     <input type="image" src="submit.gif" alt="Submit" />
reset	定义重置按钮。重置按钮会清除表单中的所有数据。 <input type="reset" value="重置"/>

八．HTML5输入类型

HTML5 增加了多个新的输入类型：

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

注释：老式 web 浏览器不支持的输入类型，会被视为输入类型text。