首页 > 代码库 > HTML 表单

HTML 表单

2024-09-28 18:28:02   216人阅读

HTML表单是指<form>标签，包含各种类型的输入框、单选框、复选框、提交按钮等元素。

一、通用属性，用于标记元素的属性，包括id,class和name。

<div  id="身份标识码，唯一编号，不可重复" class="类别，可重复" name="名字，可重复">   </div>

二、表单<form>,用于提交页面填写的内容到后台，非常常见。

<form method="get"action="提交的地址"> method表示提交方法类型 get或者post，二者传递方式不同，get会直接显示在地址栏，post不会显示 action表示地址

　　<input type="text"name=“参数1”/> text，提交类型文本文本，

　　<input type="text"name=“参数2”/>     get类型提交后会在浏览器地址栏后加上？参数1=参数值1&参数2=参数值2  post不会显示

　　<input type="password" name="密码" />password，提交类型密码，输入的值会显示*，不可见

　　<input type="radio" value="http://www.mamicode.com/提交值1" 单选框" name="单选框" id="nan"/><label for="nan">男 </label> 

　　<input type="radio” value="http://www.mamicode.com/提交值2" 单选框" name="单选框" id="nv"/><label for="nv">女</label>   radio表示单选框，名字需要一样 否则会都可以选  <label>可以点击文字选中单选框 需要for="单选框的id" 配合使用 checked表示默认选中这个单选框 可单写也可写成checked=“checked”

　　<input type="checkbox" name="名字"value="http://www.mamicode.com/提交值" id="id1"> <label for="id1">复选内容1</label>

　　<input type="checkbox" name="名字"value="http://www.mamicode.com/提交值" id="id2"> <label for="id2">复选内容1</label> checkbox是复选框，可以多个同名字的同时选择但是value不能一样，防止提交值重复，也可以有默认选中项checked。

　　<select name="1" size="7" multiple> 下拉列表  size表示该框同时显示7行 不设置默认显示一行 multiple表示可以多选需要摁住Ctrl

　　　　<option value="http://www.mamicode.com/提交值1">第1个选项</option>

　　　　<option value="http://www.mamicode.com/提交值2" selected>第2个选项</option>  selected表示默认选中该项

　　　　<option value="http://www.mamicode.com/提交值3">第3个选项</option>

　　</select>

　　<input type="hidden" value="http://www.mamicode.com/提交值" name="用户id" /> hidden隐藏域 不会在页面上显示 用于给用户分配一个id 后台用的到

　　<input type="submit，提交按钮" value="http://www.mamicode.com/提交表单，显示在按钮上的文字"/>  submit，提交按钮

　　<input tyep="reset" value="http://www.mamicode.com/重置" disabled/> reset表示重置，会将表单页面恢复的未填写状态，相当于清空  disabled 按钮不可用

<input type="button" onclick=alert("哈哈") value="http://www.mamicode.com/按钮上显示文字" />button 按钮 需要配合JS事件一起用 onclick=alert("哈哈")为事件：点击后弹窗显示"哈哈哈"

<textarea name=="1"></textarea> 文本域，多行文字填写区域，用于填写大段文字

<input type="file" name="文件上传" /> 文件上传 需要配合后台使用

<input type="text" placeholder="请输入内容" name=“参数1” hidden/> placeholder相当于提示，灰色显示不影响内容输入  hidden 隐藏此按钮（HTML5）

</form>

三、课上练习代码

<!--<div class="" name="" class=""></div>-->
    <form method="get" action="http://www.baidu.com"> <!--表单 提交方式get 提交地址百度-->
        姓名<input type="text" placeholder="非主流火星文禁止" name="name"/> <!--提交类型文本框 名称是name 框里有灰色提示不影响输入-->
        <br />
        年龄<input type="text" name="age" /><!--提交类型文本框 名称是age -->
        <br />
        密码<input type="password" name="pwd" /><!--提交类型密码 名称是pwd -->
        <br />
        性别：<!-- 单选框 性别 默认雄 点击选择框和文字都可以选中-->
            <input type="radio" value=http://www.mamicode.com/"1" name="sex" id="man" checked /><label for="man">雄</label>
            <input type="radio" value=http://www.mamicode.com/"0" name="sex" id="woman" /><label for="woman">雌</label>
            <input type="radio" value=http://www.mamicode.com/"0" name="sex" id="guess" /><label for="guess">你猜</label>
        <br />
        爱好：<!--复选框 无默认 点击选择框和文字都可以选中-->
            <input type="checkbox" name="qxnan" value=http://www.mamicode.com/"1" id="nan" /><label for="nan">公</label>
            <input type="checkbox" name="qxnv" value=http://www.mamicode.com/"2" id="nv" /><label for="nv">母</label>
            <input type="checkbox" name="qxnan&nv" value=http://www.mamicode.com/"3" id="nan&nv" /><label for="nan&nv">都行</label>
            <input type="checkbox" name="qxwhatever" value=http://www.mamicode.com/"4" id="whatever" /><label for="whatever">来者不拒</label>
        <br />
        干嘛来了？<del>按住ctrl可多选</del><br /> <!--下拉列表框 size=1时，菜单模式,不可多选，>1时，列表模式，可多选-->
            <select name="doing" size="1" multipel>
                <option value=http://www.mamicode.com/"upgrade">打怪升级</option>
                <option value=http://www.mamicode.com/"fallinlove">谈恋爱</option>
                <option value=http://www.mamicode.com/"kaihougong">开后宫</option>
                <option value=http://www.mamicode.com/"Missionary">传教</option>
                <option value=http://www.mamicode.com/"firefirefire">F!F!F!</option>
            </select>
        <br />
        <input type="hidden" value=http://www.mamicode.com/"用户ID" name="useid" /><!--隐藏域 用于给注册用户一个ID 不给用户看-->
        <br />
        &nbsp准备好了吗？！<input type="submit" value=http://www.mamicode.com/"嗨起来！"/><!--提交按钮-->&nbsp&nbsp
        <input type="reset" value=http://www.mamicode.com/"等会我要重填" />&nbsp&nbsp
        <input type="button" onclick=alert("你还是点了，然而并没有什么卵用") value=http://www.mamicode.com/"不用点" /enabled> 
        <!--空白按钮 用于触发JS disabled禁用 enable可用  hidden隐藏-->
        <br />
        <br />
        按捺不住吐槽欲望了？说几句吧！
        <br />
        <br />
        <textarea style="width:300px; height:100px"></textarea>
    </form>

 

四、效果图

 技术分享

HTML 表单


联系
我们