【html&css学习】表单及表单项

  表单在网络中很常见,如百度的搜索框,各种登录框密码,贴吧的帖子等都需要用表单来完成。表单是元素form且必须要有action属性来设置表单提交的地址。使用form创建的仅仅只是空表单,还有要表单项,常用的表单项有文本框(text),密码输入框(password),提交按钮(submit),单选框(radio),多选框(checkbox),下拉列表(select和option),文本域(textarea),重置按钮(reset),单纯的按钮(button)另外还有可以对表单项分组的长表单(field和legend)。还有一些一些细节详情在下方代码,比如:name表示提交内容的名字,value在文本框和密码框是是默认值,在单选和多选框是被提交的内容。label标签的for属性值与input标签的id属性值两者结合的作用。

  最后我们可以用等方式来达到input元素一样的效果,且这样方法更加灵活,比如可以添加图片。欢迎各位留言讨论!

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
    head>
    <body>
        
        <form action="target.html">
            
        用户名<input type="text" name="username"  value="请输入用户名" />    
        
        <br>
        <input type="submit" value="注册"/>
        <br>
        密码<input type="password" name="password" value="123"/>
        <br>
        <input type="radio" name="gender" value="male" /><input type="radio" name="gender" value="female" checked="checked"/><br>
        
        <input type="checkbox" name="hpbby"  value="lq" />篮球
        <input type="checkbox" name="hpbby"  value="lq" />足球
        <input type="checkbox" name="hpbby"  value="lq" />排球
        <input type="checkbox" name="hpbby"  value="lq" />网球
        <br>
        
        <select name="mx" >
            <optgroup label="奔跑吧兄弟">
            <option value ="fnn">王祖蓝option>
            <option value ="fnn">杨颖option>
            <option value ="fnn">邓超option>    
            optgroup>

            <optgroup label="极限男人帮">
            <option value ="fnn">黄渤option>
            <option value ="fnn">黄磊option>
            <option value ="fnn" selected="selected">张艺兴option>    
            optgroup>
        select><br>
        
            <textarea name="info">
                
            textarea><br>
            
            <input type="reset"  /><br>
            
            <input type="button" value="这是一个按钮" /><br>
            
            
            <button type="button">按钮2button><br>
            <button type="reset">重置2button><br>
            <button type="submit">注册2button><br>
            
            
            <label for="username">用户名label><input type="text" name="username" id="username" value="请输入用户名" />
            <br>
            <input type="radio" name="gender" id="male" value="male" /><label for="male">男性label><br>
            
            
            <fieldset id="">
                <legend>用户信息legend>
                <input type="text" id="" value="" />
                <input type="password" name="" />
            fieldset>
            <fieldset id="">
                <legend>喜欢的明星legend>
            fieldset>
                
            
        form>
    body>
html>

代码在网页中实现效果如下:

【html&css学习】表单及表单项_第1张图片

 

你可能感兴趣的:(【html&css学习】表单及表单项)