首页 » HTML » HTML表单元素

HTML表单元素

HTML表单(Form)用来向服务器提交数据,例如登录/注册表单,提交购物车表单进行结算等。表单中几乎可以包含任意元素,例如表格(Table)、输入框、文本段落、单选/多选按钮、下拉列表、提交按钮等。HTML Form和Table的区别是,Table通常用来展示数据,而Form驱动用户输入,提交数据。

<input>标签 - input元素默认值 - <select>标签 - <label>标签 -

HTML表单的基本格式如:

<form action="handle.php" method="post">
...
</form>

其中,action属性指定了处理表单的文件,method指定了提交表单的方法,可以是post或get(默认)。一个比较完备的表单示例:

<form method="post">
    姓名:<input type="input" name="username" placeholder="username" /> <br/>
    密码:<input type="password" name="password" placeholder="your password" /> <br/>
    性别:
    <input type="radio" name="sexy" id="male" value="male" checked />
    <label for="male">男</label>
    <input type="radio" name="sexy" id="female" value="female" />
    <label for="female">女</label><br/>
    兴趣:
    <input type="checkbox" name="interest" id="read" value="read" />
    <label for="read">阅读</label>
    <input type="checkbox" name="interest" id="travel" value="read" />
    <label for="travel">旅行</label><br/>
    来自:
    <select name="cfrom">
        <option value="sc" selected>四川</option>
        <option value="hn" >湖南</option>
        <option value="jx" >江西</option>
    </select><br/>
    简历:<textarea cols="40" rows="5" name="intro"></textarea><br/>
    <input type="submit" value="提交">
</form>
姓名:
密码:
性别:
兴趣:
来自:
简历:

<input type="text">是可输入的单行文本,<textarea>是可输入的多行文本,<input type="password">是输入密码,所有键入的字符都以·显示在屏幕。

Input类型

比较完整的Input列表(<input type="xxx">)

传统Input元素

  • text, password
  • select, checkbox, radio
  • submit, button, reset, image(以图片作为按钮)
  • file, hidden

HTML5新元素

  • 常用:email, number, range, url, tel
  • 日期:date, datetime, datetime-local, month, week, time
  • 其他:color(color picker)

HTML input中新加placeholder属性,可以描述这个输入框的提示信息,如:

姓名:

设置Input元素的默认值

<input type="text" value="defult-value" />
<input type="radio" checked />radio descr
<input type="checkbox" checked />checkbox descr
<select>
    <option selected>option descr</option>
</select>
<textarea>default-value</textarea>

checked属性。checked属性可用于 <input type="checkbox">或<input type="radio">, 表明选项被勾选。这个属性的格式如:

<input checked="checked" />
<input checked />

<select>标签

<select>标签的基本格式如:

<select id="sel" name="cfrom">
    <option value="bj" selected>北京</option>
    <option value="sh">上海</option>
</select>

提交表单后,服务器端判断select的值如(PHP代码):

$sel_opt = $_POST["sel"];   /* select name */
if($sel_opt == "v1") {}

<label>标签

label标签通常用来与一个输入元素关联,并在如鼠标点击事件中触发关联元素

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

点击Male/Female这样的被<label>包围起来的文字,就能选中radio元素。要让label文字与按钮显示在同一行,可以设置它的display方式:

label {display:inline;}

分享

0