六、form表单使用 常用说明

一使用button定义按钮

除了可以使用 更强大功能

<button type="按钮类型">
普通文本、格式化文本、图像
</button>

button标签属性说明

属性名 说明
disabled 指定是否禁用此元素.该属性只能是disable或者省略
name 指定该按钮的唯一名称
type 指定该按钮属于哪一种按钮，只能是button,reset,submit

列表框和下拉菜单

<select name="指定列表名称" size="行数">
    <option value="选项值" selected="selected">...</option>
</select>

列一常用属生

属性名 说明
disabled 指定是否禁用此元素。该属笥只能是disabled或者是省略
mutiple 设置该列表框是滞允许多选
size 指定该列表内同时显示多 少个列表项

案例

<select id="city" name="city" multiple="multiple" size="3">
    <option>北京</option>
   <option>上海</option>
   <option>南昌</option>
 <option>杭州</option>
</select>

<optgroup>用于定义 列表项目或菜单项组，它的常用属性如下:

属性名 说明
label 指定该选项组的标签。这个属性必填
disable 禁用该选项组里的所有选项，该属性值只能是disabled或省略

上课案例

<!DOCTYPE html>
<html>
<head>
    <title>表单案例</title>
    <meta charset="utf-8">
    <style type="text/css">
        .labeltext{
            float: left;
        }
    </style>
</head>
<body>

    <input type="input"  name="email">
    <form action="index.html"  method="get">
        <font width="80px">用户名：</font>
        <input type="hidden" name="idcard" value="3622892392434543">
        <input  type="input" maxlength="10" size="10" name="username"/><br/>
        <font width="80px">密码：</font><input type="password"  name="password"><br>
        邮箱：<input type="email" name="email"></br>
        性别:<input type="radio" name="sex" checked="checked" value="男" >男 
        <input type="radio" name="sex" checked="checked" value="女" >女 
        <input type="radio" name="sex" value="保密" >保密 </br>
        爱好：<input type="checkbox" checked="checked" name="aihao">
        打台球 
        <input type="checkbox" checked="checked" name="aihao">
        打玻璃球 
        <input type="checkbox" name="aihao">
        打篮球
        <br>
        <select name="city" size="3">
            <option>&nbsp;&nbsp;&nbsp;上海&nbsp;&nbsp;&nbsp;</option>
            <option>&nbsp;&nbsp;&nbsp;北京</option>
            <option>&nbsp;&nbsp;&nbsp;南京</option>
            <option>&nbsp;&nbsp;&nbsp;南昌</option>
            <option>&nbsp;&nbsp;&nbsp;杭州</option>
        </select>

        <select name="shenfen" size="4">
            <optgroup label="江西">
                <option>&nbsp;&nbsp;&nbsp;南昌&nbsp;&nbsp;&nbsp;</option>
                <option>&nbsp;&nbsp;&nbsp;赣州</option>
                <option>宜春</option>
                <option>吉安</option>
            </optgroup>
            <optgroup label="浙江">
                <option>杭州</option>
                <option>温州</option>
                <option>义乌</option>
                <option>金华</option>
            </optgroup>
        </select>
        <br>
        <font class="labeltext" >描述：</font>
        <textarea rows="6" cols="50">
            
        </textarea>

        <br>

        <input  type="button" name="button" value="    按钮    "/>
        
        <input type="submit" value="提交" name="submit">
        <input type="reset" value="重置" name="reset">

        <button type="reset" name="重置" > 重置</button>
    </form> 

</body>
</html>

上课案例2

<!DOCTYPE html>
<html>
<head>
    <title>王者荣耀注册</title>
    <meta charset="utf-8">
    <style type="text/css">
    body{
        width: 500px;

    }
        
    </style>
</head>
<body>

    <h2>王者荣耀注册</h2>
    <form action="success.html" method="post">
    <fieldset >
    <legend>基本信息</legend>
    <img src="default_head.png" width="50px" height="50px" alt="头像" /> 
    <input type="file" name="head"> <br>

    选择账号类型: 
    <input type="radio"  name="accountType" value="1"> QQ   
    <input type="radio" name="accountType" checked="checked" value="2"> 微信<br>

    创建游戏昵称: <input type="text" name="nikename" value=""> <br>

    性别: <input type="radio" name="sex" value="1"> 男  <input type="radio" name="sex" checked="checked" value="0"> 女
    <br>
    选择服务器: 
    <select>
        <optgroup label="0~7区">
        <option>突进白刃</option>   
        <option>血月之士</option>   
        <option>狂乱奔流</option>   
        <option>乱舞心火</option>   
        <option>无畏铁躯</option>   
        <option>净化共鸣</option>   
        <option>阳炎回声</option>   
        </optgroup>
        <optgroup label="8~14区">
        <option>突进白刃</option>   
        <option>血月之士</option>   
        <option>狂乱奔流</option>   
        <option>乱舞心火</option>   
        <option>无畏铁躯</option>   
        <option>净化共鸣</option>   
        <option>阳炎回声</option>   
        </optgroup>
    </select>
</fieldset>
<fieldset>
    <legend>可选信息</legend>
    <br>
    常用角色类型:<input type="checkbox" name="role" value="1">坦克 
    <input type="checkbox" name="role" value="2">法师 
    <input type="checkbox" name="role" value="2">射手(ADC)  
    <input type="checkbox" name="role" value="2">刺客  
    <input type="checkbox" name="role" value="2">辅助 <br>
    <textarea cols="50" rows="7">描述你的性格</textarea>
</fieldset>
<center>
<input type="submit" value="注册"> <input type="reset" name="reset">
<button type="reset">注册</button>
</center>
</form>
</body>
</html>

效果

EE59AC35-14BB-45E3-91C7-061194D73A58.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容