HTML 表单

2019-08-14 09:58:15来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

 

<form>元素:

<form action="" method="get|post">

</form>

 

 

<input>元素:

<input type="" name="" placeholder="" />

常用属性:

  • type  文本框类型
  • name  指定了name的字段才会被提交(不能用id代替name属性)
  • placeholder   占位符
  • value  输入框中的文本
  • autofocus  自动聚焦
  • disabled  禁用
  • readonly  只读
  • required  该字段是必填的,会自动检查该字段是否已填写,未填写会提示
  • size  指定输入框的宽度,以字符计。
  • form属性  指定此表单组件属于哪个表单(常用于<form>外的表单元素)
  • formaction指定将此表单组件提交给xx来处理,会覆盖所属<form>的action属性。
  • title  提示信息,鼠标移到输入框上时会显示提示信息
  • pattern  指定正则表达式,浏览器会自动用这个正则表达式来验证内容,不符合会提示

 

<input>的type属性可能的值:

  • text   单行文本框
  • password  密码框
  • radio  单选按钮
  • checkbox   复选框
  • file  选择文件
  • image  图片
  • button  普通按钮
  • reset  重置按钮
  • submit  提交按钮
  • image   以图片作为提交按钮,点击会提交表单
  • hidden  隐藏域,不显示在页面上,提交时仍会提交此字段,常用来提交隐秘信息
  • file  选择文件

 

  • color  颜色选择器
  • date  日期选择器(年月日)
  • month  日期选择器(年月)
  • datetime-local  时间日期选择器(年月日+时分)
  • email  email格式。会自动检查内容是否符合email格式,不符合会提示
  • number  数字格式。会自动检查内容是否符合要求,不符合会提示
  • range  水平滑动条
  • search  搜索框,和普通的文本框差不多,只是框内右侧有一个X,点击可清空框中文本。
  • tel 电话号码
  • time  时间选择器(时分)
  • url  网址,会自动检查内容是否符合url格式,不符合会提示

上面的这些属性值,有的浏览器尚未实现,最好自己写正则表达式验证。

<input />、<img />是少数几个能设置width、height的行内元素。

 

 

单行文本框:

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

 

密码框:

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

 

单选按钮:

性别:<input type="radio" name="gender" value="male" /><input type="radio" name="gender" value="女" /><br />

一组单选按钮的name要相同。

 

 

复选框:

爱好:<br />
    <input type="checkbox" name="hobby" value="basketball" />篮球<br />
    <input type="checkbox" name="hobby" value="running" />跑步<br />
    <input type="checkbox" name="hobby" value="swimming" />游泳<br />

复选框的字段会分别提交,比如?hobby=basketball&hobby=running,并不是放在一个数组中提交,就是说一组复选框的name可以不同。

 

 

输入数字:

<input type="number" name="" min="0" max="10">

只能输入[0,10]上的10个整数其中之一。可指定步长:

<input type="number" name="" min="0" max="10" step="2">

只能输入0,2,4,6,8,10这几个数字其中之一。

会自动检查内容是否要求,不符合会提示。

 

 

<input>的form属性:

<form id="form1" action="" method="get">

</form>
    
<input type="" name="" form="form1" />

<input>元素可以通过form属性与一个或多个表单(的id)绑定,绑定后此<input>属于所绑定的表单,提交表单时会提交此<input>。

可与多个表单绑定,通过逗号隔开即可,form="from1,form2"。

 

 

<input>的formaction属性:

<form action="1.php" method="">
    <input type="" name="" formaction="2.php" />
</form>

提交时会把此<input>提交给2.php处理,不会提交给1.php(覆盖<form>元素的action属性),表单的其他字段提交给1.php处理。

 

 

<input>的title属性:

请输入密码:<input type="password" name=""  title="密码只能为字母、数字" />

鼠标移到输入框上时,会弹出title设置的提示信息。

 

 

<input>的pattern属性:

<input type="text" name="" pattern="[A-Za-z]{3}" title="Three letter country code">

浏览器会自动使用这个正则表达式来验证内容,不符合要求会提示。

 

 

水平滑动条:

<input type="range" name="" min="0" max="100">

可用step属性指定步长,可用value属性指定默认值。

 

 

隐藏域:

input type="hidden" name="" value="" />

 

 

 

上传文件:

<form action="" method="post" enctype="multipart/form-data">
    <input type="file" name="" />
</form>

method必须指定为post,enctype必须指定为multipart/form-data。

 

默认可以选择所有类型的文件,可以使用accept属性来限定文件类型:

<input type="file" name="" accept="image/jpeg" />

可以使用通配符: accept="image/*" 

 

默认只能选择一个文件,可使用multiple属性指定可选择多个文件:

<input type="file" name=""  multiple />

 

 

 

<label>元素:绑定输入框,点击<label>元素,输入框也会聚焦

<label for="user">用户名:</label>
<input type="text" name="user" id="user">

通过<label>的for属性绑定输入框的id(必须是id,不能用name代替)。

 

 

按钮:

<input type="button" value="普通按钮" />
<input type="reset" value="重置" />
<input type="submit" value="提交" />
<input type="image" src="image/1.jpg" width="" height="" />

type="image"是以图片作为提交按钮上的内容,点击会提交表单,可以通过设置<input>的width、heigth来设置图片的宽、高。

 

<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交</button>

 

 

 

下拉列表:<select>+<option>      只能从所给项中选择一项

请选择国籍:
<select name="nationality">
  <option value="China">中国</option>  <!--默认选择第一项-->
  <option value="America">美国</option>
  <option value="other">其他</option>
</select>

提示文字可以这样写:

<select name="nationality">
  <option>请选择国籍</option>
  <option value="China">中国</option>
  <option value="America">美国</option>
  <option value="other">其他</option>
</select>

此处的<option>是双标签。

 

 

文本框,可以从所给项中选择一项,也可以自己输入、编辑内容:<input>+<datalist>

请选择您使用的浏览器:
<input list="browsers">
    
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

通过<input>的list属性绑定<datalist>的id(只能是id,不能是name)。

此处的<option>是单标签。

 

 

文本域:

<textarea name="" rows="10" cols="50">此处可以写默认值</textarea>

文本域的默认值不是通过value属性指定的。

 


原文链接:https://www.cnblogs.com/chy18883701161/p/11320760.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:微信小程序 buton清除默认样式

下一篇:HTML连载28-标签的权重