前端学习笔记

05HTML基础--表单标签

2019-02-19  本文已影响0人  魏皇子

表单标签

<form>
    所有的表单内容,都要写在form标签里面
</form>


input标签

<input type="radio" name="xingbie" /> 男
<input type="radio" name="xingbie" /> 女
<input type="radio" name="xingbie" /> 妖

image
<input type="checkbox" name="aihao"/> 篮球
<input type="checkbox" name="aihao"/> 足球
<input type="checkbox" name="aihao"/> 棒球

image
    <input type="radio" name="xingbie" checked="checked"/> 男
    <input type="radio" name="xingbie" /> 女
    <input type="radio" name="xingbie" /> 妖

<input type="checkbox" name="aihao" checked="checked"/> 篮球
<input type="checkbox" name="aihao" checked="checked"/> 足球
<input type="checkbox" name="aihao"/> 棒球

<!--给文本框添加绑定-->
<label for="account">账号:</label>
<input type="text" id="account" />

<!--给单选框添加绑定-->
<input type="radio" name="sex" id="man" /> <label for="man">男</label>

<!--给多选框添加绑定-->
<input type="checkbox" id="basketball" />
<label for="basketball">篮球</label> 

image

数据列表

datalist>
    <option>待选项内容</option>
</datalist>

请输入你的车型: <input type="text" list="cars">

<datalist id="cars">
    <option>奔驰</option>
    <option>宝马</option>
    <option>奥迪</option>
    <option>路虎</option>
    <option>宾利</option>
</datalist>

image image

多行文本框(文本域)

<textarea cols="30" rows="10">默认</textarea>

        <!--禁止手动拉伸-->
    <style type="text/css">
        textarea{
            resize: none;
        }
    </style>


下拉列表

选择籍贯:
<select>
    <option>北京</option>
    <option>河北</option>
    <option>河南</option>
    <option>山东</option>
    <option>山西</option>
    <option>湖北</option>
    <option>贵州</option>
</select>

<select>
    <option>北京</option>
    <option>河北</option>
    <option>河南</option>
    <option>山东</option>
    <option>山西</option>
    <option>湖北</option>
    <option selected="selected">贵州</option>
</select>

image
<select>
    <optgroup label="北京市">
        <option>海淀区</option>
        <option>昌平区</option>
        <option>朝阳区</option>
    </optgroup>
        <optgroup label="广州市">
        <option>天河区</option>
        <option>白云区</option>
    </optgroup>
    <option selected="selected">贵州</option>
</select>

image

作者:极客江南
链接:https://www.jianshu.com/p/e4a36feadc64
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
单标签

<form>
    所有的表单内容,都要写在form标签里面
</form>


input标签

<input type="radio" name="xingbie" /> 男
<input type="radio" name="xingbie" /> 女
<input type="radio" name="xingbie" /> 妖

image
<input type="checkbox" name="aihao"/> 篮球
<input type="checkbox" name="aihao"/> 足球
<input type="checkbox" name="aihao"/> 棒球

image
    <input type="radio" name="xingbie" checked="checked"/> 男
    <input type="radio" name="xingbie" /> 女
    <input type="radio" name="xingbie" /> 妖

<input type="checkbox" name="aihao" checked="checked"/> 篮球
<input type="checkbox" name="aihao" checked="checked"/> 足球
<input type="checkbox" name="aihao"/> 棒球

<!--给文本框添加绑定-->
<label for="account">账号:</label>
<input type="text" id="account" />

<!--给单选框添加绑定-->
<input type="radio" name="sex" id="man" /> <label for="man">男</label>

<!--给多选框添加绑定-->
<input type="checkbox" id="basketball" />
<label for="basketball">篮球</label> 

image

数据列表

datalist>
    <option>待选项内容</option>
</datalist>

请输入你的车型: <input type="text" list="cars">

<datalist id="cars">
    <option>奔驰</option>
    <option>宝马</option>
    <option>奥迪</option>
    <option>路虎</option>
    <option>宾利</option>
</datalist>

image image

多行文本框(文本域)

<textarea cols="30" rows="10">默认</textarea>

        <!--禁止手动拉伸-->
    <style type="text/css">
        textarea{
            resize: none;
        }
    </style>


下拉列表

选择籍贯:
<select>
    <option>北京</option>
    <option>河北</option>
    <option>河南</option>
    <option>山东</option>
    <option>山西</option>
    <option>湖北</option>
    <option>贵州</option>
</select>

<select>
    <option>北京</option>
    <option>河北</option>
    <option>河南</option>
    <option>山东</option>
    <option>山西</option>
    <option>湖北</option>
    <option selected="selected">贵州</option>
</select>

image
<select>
    <optgroup label="北京市">
        <option>海淀区</option>
        <option>昌平区</option>
        <option>朝阳区</option>
    </optgroup>
        <optgroup label="广州市">
        <option>天河区</option>
        <option>白云区</option>
    </optgroup>
    <option selected="selected">贵州</option>
</select>

image

作者:极客江南
來源:简书

上一篇下一篇

猜你喜欢

热点阅读