表单项

Author Avatar
Ninefire 6月 06, 2018
  • 在其它设备中阅读本文章
  • 使用<input type="redio"/>来创建一个单选框
    单选框通过name属性进行分组,name属性值相同的为一组单选框,一组内只能选中其一。
    仅供用户选择而不能直接填写内容的表单项,必须指定一个value属性,此时被选中的value属性值将会提交给服务器。

例:

性别:
<input type="redio" name="gender" value="male"/><input type="redio" name="gender" value="female" checked="checked"/>

  • 使用<input type="checkbox">来创建一个复选框
    复选框也必须指定value属性。
    如果需要单选框或复选框中默认选中某个或某些选项,可以给希望默认选中的选项添加checked="checked"属性。

例:

爱好:
<input type="checkbox" name="hobby" value="football"/>足球
<input type="checkbox" name="hobby" value="basketball" checked="checked"/>篮球
<input type="checkbox" name="hobby" value="volleyball"/>排球
<input type="checkbox" name="hobby" value="badminton" checked="checked"/>羽毛球

  • 使用<select><select/>标签来创建一个下拉列表
    select标签中使用<option><option/>标签来创建列表项(即选择项)。
    下拉列表的name属性需指定给select,而value属性需指定给option
    如果需要下拉列表默认选中某个选项,可以给希望默认选中的选项添加select="select"属性。
    若给select标签添加multiple=”multiple”属性,则下拉列表会变为可以多选的下拉列表。

例:

你喜欢的姑娘:
<select name="girl">
    <option value="yourfriend">你的朋友<option/>
    <option value="yourclassmate" selected="selected">你的同学<option/>
    <option value="friendcalssmate">你朋友的同学<option/>
    <option value="calssmatefriend">你同学的朋友<option/>
</select>

select中可以使用<optgroup><optgroup/>对列表项进行分组,一个optgroup内为一组。
可以使用label属性来指定分组的名称。


  • 使用<input type="text">来创建一个单行文本框
  • 使用<textarea><textarea/>来创建一个文本域(多行文本框)
    例:自我介绍<textarea name="info"><textarea/>
  • 使用<input type="submit"/>来创建一个提交按钮
    点击提交按钮之后表单中的所有内容将被提交到服务器。
  • 使用<input type="reset">来创建一个重置按钮
    点击重置按钮之后表单中的所有内容将恢复为默认值。
  • 使用<input type="button">来创建一个单纯的按钮
    这个按钮没有任何默认功能,只能被点击。
    主要用来绑定JavaScript事件。
  • 使用<button><button/>来创建一个按钮
    button创建按钮与input类似,由于它是成对出现的标签,所以使用时更加灵活,推荐使用。

  • 使用<lable><lable/>标签来选中表单中的提示文字
    HTML中提供了一个lable标签,专门用来选中表单中的提示文字,该标签可以指定一个for属性,该属性的值需指定一个表单项的id值。

例:

<input type="redio name="gender" id="male">
<lable for="male"><lable/>
  • 使用<fieldset><fieldset/>标签为表单项分组
    可以将表单项中的同一组放入一个fieldset中。
  • 使用<legend><ledend/>子标签为fieldset指定组名

如发现错误请联系我,谢谢你。
本文链接:http://ninefire.tk/HTML&CSS.basics/66.html