html5订制表单

日期:2021-02-27 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

HTML5中存在多种多样不一样的键入框和按钮,根据设定input元素的type特性来完成,除此以外,HTML5中还适用挑选目录、多行键入框等,这些元素都有自身的主要用途和特性,下面11详细介绍。

单写作本键入框

type为text表明input元素为1个单写作本框,是input元素的默认设置主要表现方式。单写作本键入框适用下面的特性设定。

设置元素尺寸

maxlength特性设置客户可以键入的标识符的最绝大多数目;size特性设置了文字框可以显示信息的标识符数目。

<form method="post" action="http://titan:8080/form">
 <p><label for="name">Name: <input maxlenth="10" id="name" name="name"/></label></p>
 <p><label for="city">City: <input size="10" id="city" name="city"/></label></p>
 <p><label for="fave">Fruit: <input size="10" maxlenth="10" id="fave" name="fave"/></label></p>
 <button type="submit">Submit Vote</button>
</form>

设定原始值和占位式提醒

value特性能够为键入框特定1个默认设置值;placeholder特性能够设定1段提醒文本,告知客户应当键入甚么种类的数据信息。

<form method="post" action="http://titan:8080/form">
 <p><label for="name">Name: <input placeholder="Your name" id="name" name="name"/></label></p>
 <p><label for="city">City: <input placeholder="Where you live" id="city" name="city"/></label></p>
 <p><label for="fave">Fruit: <input value="Apple" id="fave" name="fave"/></label></p>
 <button type="submit">Submit Vote</button>
</form>

在chrome中的实际效果以下:

用button元素重设表单时,访问器会修复文字框中的占位式提醒和默认设置值。

应用数据信息目录

list特性能够设定为1个datalist元素的id特性值,这样客户便可以在datalist元素特定的目录中开展挑选。datalist元素是HTML5中新增的,用来出示1批值,协助客户键入必须的数据信息。
 

<form method="post" action="http://titan:8080/form">
 <p><label for="name">Name: <input placeholder="Your name" id="name" name="name"/></label></p>
 <p><label for="city">City: <input placeholder="Where you live" id="city" name="city"/></label></p>
 <p><label for="fave">Fruit: <input list="fruitlist" id="fave" name="fave"/></label></p>
 <button type="submit">Submit Vote</button>
</form>
<datalist id="fruitlist">
 <option value="Apples" label="Lovely Apples"/>
 <option value="Oranges">Refreshing Oranges</option>
 <option value="Cherries"/>
</datalist>

datalist元素中的每个option都意味着1个客户可挑选的值,在chrome中的实际效果以下:

转化成写保护或被禁用的文字框

readonly特性表明文字框写保护,disabled特性表明不能编写,出外观主要表现上有差别。

<form method="post" action="http://titan:8080/form">
 <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p>
 <p><label for="city">City: <input value="Boston" readonly id="city" name="city"/></label></p>
 <p><label for="fave">Fruit: <input value="Apple" id="fave" name="fave"/></label></p>
 <button type="submit">Submit Vote</button>
</form>

在chrome中实际效果以下:

设定了disabled特性的表单被设定为灰色,客户不可以编写在其中的文本,且该表单的內容不容易被递交到服务器;而设定了readonly特性的表单会阻拦客户编写文字框中的內容,但不危害外型,且內容会发给服务器。

登陆密码键入框

type特性值为password的input元素用于键入登陆密码。该特性的input元素适用下列特性:
1)maxlength:客户能够在登陆密码框中键入的标识符的最绝大多数目;
2)pattern:用于键入认证的正则表达式表述式;
3)placeholder:有关所需数据信息种类的提醒;
4)readonly:设定登陆密码框为写保护;
5)required:客户务必键入1个值,不然没法根据键入认证;
6)size:根据特定登陆密码框中可见的标识符数目设定其宽度;
7)value:设定原始登陆密码值。
 

<form method="post" action="http://titan:8080/form">
 <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p>
 <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p>
 <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p>
 <button type="submit">Submit Vote</button>
</form>

客户键入的标识符在登陆密码框中显示信息为"*",但必须留意,在递交表单时,服务器收到的是密文登陆密码,针对安全性相当关键的网站和运用系统软件,应当考虑到应用SSL/HTTPS对访问器和服务器之间的通讯內容数据加密。

按钮

type特性设定为submit、reset和button则会转化成相近button元素那样的按钮。
1)submit:转化成递交表单的按钮,适用特性:formaction、formenctype、formmethod、formtarget和formnovalidate,这些特性和button元素的同名特性用法同样,参照这里;
2)reset:转化成更改表单的按钮;
3)button:转化成一般按钮,无任何实际操作。
3中按钮的表明文本都根据value特性特定。
 

<form method="post" action="http://titan:8080/form">
 <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p>
 <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p>
 <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p>
 <input type="submit" value="Submit Vote"/>
 <input type="reset" value="Reset"/>
 <input type="button" value="My Button"/>
</form>

在chrome中的实际效果以下:

用input元素转化成按钮与用button元素的不一样的地方在于后者能够用来显示信息含标识的文本。但因为各个访问器对input元素的解决方法较为1致,且一些较老的访问器(比如IE6)不可以正确解决button元素,因此许多网站都更趋向于用input元素。

带限定的键入框

数据键入框

type特性为number的input元素只接纳标值。适用的特性包含:
1)list:特定为文字框出示提议值的datalist元素,其值为datalist元素的id值;
2)min:设定最少值;
3)max:设定最大值;
4)readonly:写保护;
5)required:说明客户务必键入1个值;
6)step:左右调整标值的步长;
7)value:特定元素的原始值。

<form method="post" action="http://titan:8080/form">
 <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p>
 <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p>
 <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p>
 <p><label for="price">$ per unit in your area: <input type="number" step="1" min="0" max="100" value="1" id="price" name="price"/></label></p>
 <input type="submit" value="Submit Vote"/>
</form>

在chrome中的实际效果以下:

范畴挑选器

应用type特性为range的input元素,客户只能用它从业先要求的范畴内挑选1个标值,该种类的input元素适用的特性与number同样。

<form method="post" action="http://titan:8080/form">
 <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p>
 <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p>
 <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p>
 <p><label for="price">$ per unit in your area: 1<input type="range" step="1" min="0" max="100" value="1" id="price" name="price"/>100</label></p>
 <input type="submit" value="Submit Vote"/>
</form>

在chrome中的实际效果以下:
 

复选框

type特性为checkbox表明复选框,适用的特性以下:
1)checked:默认设置是不是挑选;
2)required:表明客户务必勾选该复选框;
3)value:设置递交给服务端数据信息值,默认设置为on。
 

<form method="post" action="http://titan:8080/form">
 <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p>
 <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p>
 <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p>
 <p><label for="veggie">Are you vegetarian: <input type="checkbox" id="veggie" name="veggie"/>vegetarian</label></p>
 <input type="submit" value="Submit Vote"/>
</form>

在chrome中的实际效果以下:

留意应用checkbox时,仅有勾选了的复选框在递交表单时才会推送给服务器。

单选按钮组

type特性为radio的input元素能够用来转化成1组单选按钮,适用的特性同checkbox。每个radio都意味着1个选项,同1组的radio应用同样的name。单选按钮组可用于选项较少的情景。

<form method="post" action="http://titan:8080/form">
 <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p>
 <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p>
 <p><fieldset>
  <legend>Vote for your favorite fruit</legend>
  <label for="apples">
   <input type="radio" checked value="Apples" id="apples" name="fave"/>
   Apples
  </label>
  <label for="oranges">
   <input type="radio" value="Oranges" id="oranges" name="fave"/>
   Oranges
  </label>
  <label for="cherries">
   <input type="radio" value="Cherries" id="cherries" name="fave"/>
   Cherries
  </label>
 </fieldset></p>
 <input type="submit" value="Submit Vote"/>
</form>

在chrome中的实际效果以下:

限制文件格式键入框

type特性值email、tel和url各自对应电子器件电子邮箱详细地址、电話号码和URL,适用的特性包含:
1)list:特定为文字框出示提议值的datalist元素,其值为datalist元素的id值;
2)maxlength:键入标识符的最绝大多数目;
3)pattern:特定用于认证键入的正则表达式表述式;
4)placeholder:特定有关所需数据信息种类的提醒;
5)readonly:表明文字框写保护;
6)required:说明客户务必键入1个值;
7)size:可见的标识符数目;
8)value:特定元素的原始值。
email还适用multiple特性,表明能够接纳好几个电子器件电子邮箱详细地址。

<form method="post" action="http://titan:8080/form">
 <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p>
 <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p>
 <p><label for="email">Email: <input type="email" placeholder="user" id="email" name="email"/></label></p>
 <p><label for="tel">Tel: <input type="tel" placeholder="(xxx)-xxx-xxxx" id="tel" name="tel"/></label></p>
 <p><label for="url">Your homepage: <input type="url" id="url" name="url"/></label></p>
 <input type="submit" value="Submit Vote"/>
</form>

在chrome中的实际效果以下:
 

時间和时间键入框

HTML5中新增了1些键入时间和時间的种类,包含:
1)datetime:获得全球光阴期和時间,包含时区信息内容;
2)datetime-local:获得当地时间和時间,不包括时区信息内容;
3)date:获得当地时间,不含時间和时区信息内容;
4)month:获得年月信息内容,不含日、時间和时区信息内容;
5)time:获得時间;
6)week:获得当今礼拜。
 

时间和時间的input元素适用的附加特性包含:

1)list:特定为文字框出示提议值的datalist元素,其值为datalist元素的id值;
2)min:设定最少值;
3)max:设定最大值;
4)readonly:写保护;
5)required:客户务必键入1个值,不然没法根据键入认证;
6)step:左右调整标值的步长;
7)value:特定元素的原始值。
 

<form method="post" action="http://titan:8080/form">
 <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p>
 <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p>
 <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p>
 <p><label for="lastbuy">When did you last buy: <input type="date" id="lastbuy" name="lastbuy"/></label></p>
 <input type="submit" value="Submit Vote"/>
</form>

在chrome中的实际效果以下:

现阶段时间和時间键入框在绝大多数访问器中适用都不太好,因而,最好是還是应用流行JavaScript库出示的日历挑选专用工具。

色调键入框

type特性为color表明色调挑选器,色调值以7个标识符的文件格式表明:以#开始,接下来是3个两位106进制数,各自意味着红、绿、蓝3种原色的值,如#FF1234。

<form method="post" action="http://titan:8080/form">
 <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p>
 <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p>
 <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p>
 <p><label for="color">Color: <input type="color" id="color" name="color"/></label></p>
 <input type="submit" value="Submit Vote"/>
</form>

在chrome中的实际效果以下:

留意大多数数访问器还没有有为这类input元素出示非常的适用。

被掩藏的键入框

hidden型的input元素能够用来掩藏1个数据信息项,并在递交表单时将其推送给服务器(一般是以便运用到这个作用)。

<form method="post" action="http://titan:8080/form">
 <input type="hidden" name="recordID" value="1234"/>
 <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p>
 <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p>
 <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p>
 <input type="submit" value="Submit Vote"/>
</form>

图象按钮

image型的input元素转化成的按钮显示信息为1个标志,点一下后递交表单。适用的特性包含:
1)alt:出示元素的表明文本,对必须依靠残障輔助技术性的客户很有效;
2)formaction:同button元素;
3)formenctype:同button元素;
4)formmethod:同button元素;
5)formtarget:同button元素;
6)formnovalidate:同button元素;
7)height:以像素为企业设定图象的高宽比;
8)src:特定要显示信息的图象的URL;
9)width:以像素为企业设定图象的宽度;
 

<form method="post" action="http://titan:8080/form">
 <input type="hidden" name="recordID" value="1234"/>
 <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p>
 <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p>
 <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p>
 <input type="image" src="accept.png" name="submit"/>
</form>

点一下图象按钮将递交表单,在递交的数据信息中会包括点一下部位的座标信息内容,因而可让图象中的不一样地区意味着不一样的实际操作,随后依据客户在图象上的点一下部位做出相应的反映。

提交文档按钮

file型的input元素用于提交文档,能够在递交表单时将文档提交到服务器。适用的特性包含:
1)accept:特定接纳的MIME种类。MIME种类的界定,参照RFC 2046(http://tools.ietf.org/html/rfc2046);
2)multiple:设定该特性能够1次提交好几个文档;
3)required:客户务必键入1个值。

<form method="post" action="http://titan:8080/form" enctype="multipart/form-data">
 <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p>
 <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p>
 <p><label for="fave">Fruit: <input value="Apples" id="fave" name="fave"/></label></p>
 <p><input type="file" name="filedata"/></p>
 <input type="submit" value="Submit Vote"/>
</form>

留意表单编号种类为multipart/form-data的情况下才可以提交文档。在chrome中的实际效果以下:

选项目录

selet元素用来转化成1个选项目录,比radiiobutton型的input元素更紧凑型,更合适选项较多的情况。该元素适用的特性包含:
1)name:目录的名字;
2)disabled:禁用该往下拉目录;
3)form:文字地区隶属的1个或好几个表单;
4)autofocus:在网页页面载入后文字地区全自动得到聚焦点;
5)required:必填;
6)size:往下拉目录中可见选项的数目;
7)multiple:可挑选好几个选项。
 

单选往下拉目录

select元素默认设置即为1个单选往下拉目录

<form method="post" action="http://titan:8080/form" enctype="multipart/form-data">
 <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p>
 <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p>
 <p><label for="fave">
 Favorite Fruit: 
  <select id="fave" name="fave">
   <option valu="apples" selected label="Apples">Apples</option>
   <option valu="oranges" label="Oranges">Oranges</option>
   <option valu="cherries" label="Cherries">Cherries</option>
   <option valu="pears" label="Pears">Pears</option>
  </select>
 </label></p>
 <input type="submit" value="Submit Vote"/>
</form>

在chrome中的实际效果以下:


 

复选框

为目录设定size特性和multiple特性后,就变成1个复选框。

<form method="post" action="http://titan:8080/form" enctype="multipart/form-data">
 <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p>
 <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p>
 <p><label for="fave">
 Favorite Fruit: 
  <select id="fave" name="fave" size="5" multiple>
   <option valu="apples" selected label="Apples">Apples</option>
   <option valu="oranges" label="Oranges">Oranges</option>
   <option valu="cherries" label="Cherries">Cherries</option>
   <option valu="pears" label="Pears">Pears</option>
  </select>
 </label></p>
 <input type="submit" value="Submit Vote"/>
</form>

在点一下选项时按住Ctrl键,便可以挑选好几个选项。在chrome中实际效果以下:

带构造的目录

optgroup元素能够用来在select元素的內容中创建1定的构造,该元素适用的特性包含:
1)label:用来为整组选项出示1个副标题;
2)disabled:灰化挑选组内的任何选项。

<form method="post" action="http://titan:8080/form" enctype="multipart/form-data">
 <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p>
 <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p>
 <p><label for="fave">
 Favorite Fruit: 
  <select id="fave" name="fave">
   <optgroup label="Top Choices">
    <option valu="apples" selected label="Apples">Apples</option>
    <option valu="oranges" label="Oranges">Oranges</option>
   </optgroup>
   <optgroup label="Others">
    <option valu="cherries" label="Cherries">Cherries</option>
    <option valu="pears" label="Pears">Pears</option>
   </optgroup>
  </select>
 </label></p>
 <input type="submit" value="Submit Vote"/>
</form>

在Chrome中的实际效果以下:

optgroup元素只起机构功效,客户没法将其做为选项选定。

多行键入框

textarea元素转化成的是多写作本框,客户能够在里边键入多写作字。包括的特性包含:
1)autofocus:在网页页面载入后文字地区全自动得到聚焦点;
2)cols:文字区内的可见宽度,整型;
3)disabled:禁用该文字区;
4)form:文字区隶属的1个或好几个表单;
5)maxlength:文字区的最大标识符数;
6)name:文字区的名字;
7)placeholder:文字地区预期值的简洁明了提醒;
8)readonly:文字区为写保护;
9)required:文字区是必填的;
10)rows:文字区的可见行数,整型;
11)wrap:文字区的文字怎样换行,包含:soft(默认设置),在表单递交时,文字区中的文字不换行;hard,在表单递交时,文字区中的文字换行(包括换行符),当应用该值时,务必要求cols特性。

<form method="post" action="http://titan:8080/form" enctype="multipart/form-data">
 <p><label for="name">Name: <input value="Adam" disabled id="name" name="name"/></label></p>
 <p><label for="password">Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/></label></p>
 <p><label for="fave">
 Favorite Fruit: 
  <select id="fave" name="fave">
   <optgroup label="Top Choices">
    <option valu="apples" selected label="Apples">Apples</option>
    <option valu="oranges" label="Oranges">Oranges</option>
   </optgroup>
   <optgroup label="Others">
    <option valu="cherries" label="Cherries">Cherries</option>
    <option valu="pears" label="Pears">Pears</option>
   </optgroup>
  </select>
 </label></p>
 <p><textarea cols="20" rows="5" wrap="hard" id="story" name="story">Tell us why this is your favorite fruit</textarea></p>
 <input type="submit" value="Submit Vote"/>
</form>

在Chrome中的实际效果以下:

結果展现地区

output元素表明测算的結果。适用的特性包含:
1)for:輸出域有关的1个或好几个元素,正中间用空格隔开;
2)form:键入字段隶属的1个或好几个表单;
3)name:目标的唯1名字(表单递交时应用)。

<form onsubmit="return false" oninput="res.value = quant.valueAsNumber * price.valueAsNumber">
 <fieldset>
  <legend>Price Calculator</legend>
  <input type="number" placeholder="Quantity" id="quant" name="quant"/>
  <input type="number" placeholder="Price" id="price" name="price"/> = 
  <output for="quant name" name="res"/>
 </fieldset>
</form>

上面应用了JavaScript的時间系统软件转化成了1个简易的测算器,在Chrome中的实际效果以下:


 

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:html5启用摄像头作用的完成编码 返回下一篇:没有了