vscode实验报告:表单控件

实验环境:

VS Code
Windouws10

Notes:

E:\学习资料笔记\HTML\作业\表单控件\HTML\1.html


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单控件title>
    <link rel="stylesheet" href="E:\学习资料笔记\HTML\作业\表单控件\CSS\1.css">
head>

<body>
    <form action="">
        
        <table>
            <caption>
                请输入您的注册信息:
            caption>
            
            <tr>
                <td class="left">
                    
                    用户名:
                td>
                <td class="right">
                    <input type="text" id="username" />
                    
                td>
            tr>

            <tr>
                <td class="left">
                密码:
                td>
                <td class="right">
                    <input type="password" id="pwd"/> 
                td>     
            tr>
            <tr>
                <td class="left">
                确认密码:
                td>
                <td class="right">
                    <input type="password" id="repwd"/>
                td>
            tr>

            <tr>
                <td class="left">
                验证码:
                td>
                <td class="right">
                    <input type="number" id="1234"/>
                td>
            tr>

            <tr>
                <td class="left">
                年龄:
                td>
                <td class="right">
                    <input type="text" id="age"/> 
                td>
            tr>

            <tr>
                <td class="left" style="padding-top: 13px;">
                性别:
                td>   
                <td class="right" style="padding-top: 13px;"> 
                    <input type="radio" name="sex" id="sex"/>BOY      
                    <input type="radio" name="sex" id="sex"/>Girl
                td>  
            tr>
            <tr>
                <td class="left" style="padding-top: 13px;">
                运动项目:
                td>
                <td class="right" style="padding-top: 13px;">   
                    <input type="checkbox" name="hobbit" id="hobbit"/>跑步   
                    <input type="checkbox" name="hobbit" id="hobbit"/>游泳   
                    <input type="checkbox" name="hobbit" id="hobbit"/>骑车   
                    <input type="checkbox" name="hobbit" id="hobbit"/>马拉松   
                    <input type="checkbox" name="hobbit" id="hobbit"/>跳高    
                
                td>
            tr>

            <tr>
                <td class="left" style="padding-top: 13px;">
                所在省份:
                td>
                <td class="right" style="padding-top: 13px;">
                   <select name="province" id="province"> 
                       <option value="">--请选择--option>  
                       <option value="江西省">    江西省option>
                       <option value="福建省">    福建省option>
                       <option value="广东省">    广东省option>
                       <option value="浙江省">    浙江省option>
                       <option value="香港省">    香港省option>
                       <option value="澳门省">    澳门省option>
                       <option value="上海省">    上海省option>
                       <option value="其他">    其他option>

                   select>
                td>
            tr>
            <tr>
                <td class="left" style="padding-top: 13px;">
                所在城市:
                td>
                <td class="right" style="padding-top: 13px;">
                   <select name="city" id="city">
                       <option value="">--请选择--option>
                       <option value="南昌市">    南昌市option>
                       <option value="抚州市">    抚州市option>
                       <option value="福州市">    福州市option>
                       <option value="厦门市">    厦门市option>
                       <option value="泉州市">    泉州市option>
                       <option value="南通市">    漳州市option>
                       <option value="元朗市">    元朗市option>
                       <option value="深圳市">    深圳市option>
                       <option value="汕头市">    汕头市option>
                   select>
                td>
            tr>
            <tr>
                <td class="left" style="padding-top: 13px;vertical-align: top;">
                个人简介:
                td>
                <td class="right" style="padding-top: 13px;">
                   <textarea name="" id="" cols="46" rows="7"> 请输入您的不小于50字的个人简介。。

                   textarea>  
                td>
            tr>
            <tr>
                <td colspan="2" style="padding-top: 25px; padding-left: 70px;" >

                    <input type="submit" value="注册" class="anniu">  
                         
                    <input type="reset" value="清空" class="anniu">   
               
                td> 
            tr>
        table>
    form>

body>

html>

vscode实验报告:表单控件_第1张图片
作用:用于搜集用户输入信息。
说明:根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
注释:在 HTML 中, 标签没有结束标签。在 XHTML 中, 标签必须被正确地关闭。

input的用法

input type 属性

style属性

option标签

textarea标签

在html代码中,使用转义字符 表示1个空格,而使用转义字符&表示 &。
1、在html代码中 和空格的区别:
在html代码中每输入一个转义字符 就表示一个空格,输入十个 ,页面中就显示10个空格位置。
而在html代码中输入空格,不管输入多少个空格,最终在页面中显示的空格位置只有一个。
例如:hmtl代码中,在两个字之间输入十个空格与输入十个转义字符 的效果对比。vscode实验报告:表单控件_第2张图片2、在html代码中,&和空格的区别
html中的转义字符&表示&字符,而空格表示的就是一个空格。在很多网站上编辑文字时,如果需要输入html中的一些转移字符,可能就需要用到&来转换。
例如:需要在页面中显示出转义字符 ,而在html代码中直接这么输入,页面中显示出来的是一个空格而不是 。这就需要先将字符&通过转义字符&表示出来,然后在它后面输入nbsp即可。
具体如下:vscode实验报告:表单控件_第3张图片

E:\学习资料笔记\HTML\作业\表单控件\CSS\1.css

table{
    margin: 0 auto;
    margin-top: 50px;
    width: 500px;
}

table caption{
    text-align: left;
    font-weight: bolder;
    font-family: 宋体;
    font-size: 25px;
    color: darkred;
    margin-bottom: 20px;
}

.left{
    width: 100px;
    padding-top: 8px;
    color: darkorchid;
    font-family: 楷体;

}

.right{
    width: 400px;
    padding-top: 8px;
    color: black;
    font-family: 楷体;
 
}

textarea{
    border-radius: 6px;
}

.anniu{
    background-color: papayawhip;
    font-family: 隶书;
    width: 80px;
    height: 40px;
    font-size: 18px;
    color: blue;
    border-radius: 68px;
    
}

效果截图:

vscode实验报告:表单控件_第4张图片

你可能感兴趣的:(HTML,html)