html表单

html表单以及表单项

表单的作用是将信息提交到服务器

一.通过form标签创建一个表单

form标签的属性

1. action 表单提交目的地的相对路径
2. method 表单提交时的请求方式（get或post，默认为get）

二.表单项

说明：表单提交到服务器时，表单中的所有信息（每个表单项）都以“键值对”的形式提交到服务器，所以，对于每一个表单，都有两个属性，一个是name属性（键值对的键名），一个是value属性（键值对的值）

1.需要用户输入的表单项，也就是说value属性的值需要用户输入

单行文本

<input type="text" name="" value="默认显示的文字" />

 

密码（隐藏回显）

<input type="password" name="" value="默认显示的文字" />

 

多行文本

<textarea name=""> 文本域中默认显示的文字 </textarea>

 

2.单选框

<input type="radio" name="" value="" />

常见的例子，选择性别

性别：
<input type="radio" name="sex" value="male" checked="checked">男
<input type="radio" name="sex" value="female">女

 

注意：单选框通过name属性进行分组，name属性相同的radio为一组，一组单选框只能选择一个（和多选框的区别）；上面的例子中，checked="checked"表示这是默认的选项

3.复选框

<input type="checkbox" name="" value="" />

常见的例子，选择爱好

爱好：
<input type="checkbox" name="hobby" value="basketball" checked="checked">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="pingpang">乒乓球

 

同单选框，name属性相同的分为一组；checked="checked"为默认选择

4.下拉列表

<select name="">
    <option value="">
</select>

还是写个爱好的例子

爱好：
<select name="hobby">
    <option value="baskectball">篮球</option>
    <option value="football">足球</option>
    <option value="pingpang" selected="selected">乒乓球</option>
</select>

 

注意：下拉列表的name属性写在select标签中，value属性写在option标签中，可以给option添加selected="selected"来设置默认选项

顺便一提：select可以设置一个multiple="multiple"，这样就可以多选

下拉列表的分组

爱好：
<select name="hobby">
    <optgroup label="球类">               
        <option value="baskectball">篮球</option>
        <option value="football">足球</option>
        <option value="pingpang" selected="selected">乒乓球</option>
    </optgroup>

    <optgroup label="跑步">               
        <option value="run1">长跑</option>
        <option value="run2">短跑</option>
        <option value="run3">接力跑</option>
    </optgroup>
</select>

 

通过optgroup标签进行分组，optgroup的label属性给分组命名

5.按钮

按钮有两种，先看第一种，自结束标签

<input type="submit" value="这是一个提交按钮"/>
<input type="reset" value="这是一个重置按钮"/>
<input type="button" value="这是一个普通按钮"/>

 

第二种，成对的标签

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

两种按钮的效果一样，但是第二种更加灵活，因为按钮不一定是一个字符串（自结束的input按钮，通过value设置按钮，只能是一个字符串），还可以是一个元素

6.label绑定标签

将label标签中的元素与一个表单项绑定
for属性，绑定到的表单项的id值

举个例子

性别：
    <label for="male">男</label>
    <input type="radio" id="male" name="sex" value="male" checked="checked">

 

有什么效果，label标签中的元素变成了被绑定表单项的一部分，现在，单机“男”这个字，相当于单机表单项

三.表单项分组

1.通过fieldset标签对表单项分组

2.通过fieldset的子标签legend标签给分组命名

3.在fieldset标签中创建表单项

<fieldset>
    <legend>第一组</legend>
    <input type="text" name=""><br/>
    <input type="text" name=""><br/>
    <input type="text" name=""><br/>
</fieldset>

<fieldset>
    <legend>第二组</legend>
    <input type="text" name=""><br/>
    <input type="text" name=""><br/>
    <input type="text" name=""><br/>
</fieldset>