HTML_from

<form>
    <!-- 默认为text:明文显示 -->
    <input type="text" name="">
    <br>    <!-- 换行 -->
    <!-- password:密文输入框 -->
    <input type="password" name="">
</form>

<!-- value:设置默认的输入框文本 -->
<input type="text" name="" value="wdc">
<!-- 文本框提示文本 -->
<input type="text" name="" placeholder="请输入内容:">

1.↑ 文本框

2.单选按钮

<form>
    <!-- radio:单选按钮 name相同时,单选按钮不能同时选中,checked="checked":默认选中 -->
    男:<input type="radio" name="性别" checked="checked">
    女:<input type="radio" name="性别">
</form>

3.复选框

<form>
    <!-- checkbox:复选框 checked="chenced":默认选中-->
    语文:<input type="checkbox" name="" checked="chenced">
    数学:<input type="checkbox" name="">
    英语:<input type="checkbox" name="">
</form>

4.下拉列表

单选:
<
form> <select name="class"> <!-- 设置的值 --> <option value="1">语文</option> <option>数学</option> <!-- 默认选中 --> <option selected="selected">英语</option> <option>化学</option> </select> </form>

多选:
<
form> <!-- multiple="multiple":实现多选, --> <select name="class" multiple="multiple"> <option>语文</option> <option>数学</option> <option>英语</option> <option>化学</option> </select> </form>

5.多行文本输入框

<form>
    <!--设置默认大小: rows:高度 cols:宽度 -->
    <textarea rows="10" cols="40"></textarea>
</form>

6.按钮

重置按钮:
<
form> <textarea rows="10" cols="40" placeholder="默认文本~"></textarea> <!-- reset:重置按钮,可以重置整个form表单的内容 --> <input type="reset" name="重置"> </form>
<button>普通按钮</button>

7.标签

<form>
    <!-- for:将id为username的组件关联起来 -->
    <label for="username">用户名:</label>
    <input type="text" name="" id="username">
    <label for="pwd">密码:</label>
    <input type="password" name="" id="pwd">
</form>

8.div

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

 

posted @ 2020-03-13 00:43  手可摘星辰。  阅读(224)  评论(0编辑  收藏  举报