带有JavaScript函数的HTML表单_Javascript_Html_Forms

带有JavaScript函数的HTML表单

javascript html forms

带有JavaScript函数的HTML表单,javascript,html,forms,Javascript,Html,Forms,我有剧本 <html> <head> <title> FORM REGISTRASI </title> <link rel="stylesheet" type="text/css" href="css/coba.css"> </head> <body> <script type="text/javascript" src="js/default.js"></script> <!--I

我有剧本

<html>
<head>
<title> FORM REGISTRASI </title>
<link rel="stylesheet" type="text/css" href="css/coba.css">
</head>
<body>
<script type="text/javascript" src="js/default.js"></script>
<!--Input-->
<form name="fform" class="daftar">
<h1>REGISTRASI AKUN</h1>
<fieldset class="row1">
    <legend>Emal</legend>
    <p>
        <label>Email</label><input type="text" placeholder="Email" name="email">
        <label>Password</label><input type="password" placeholder="Password">
    </p>
    <p>
        <label>Konfirmasi Email</label><input type="text" placeholder="Konfirmasi Email">
        <label>Konfirmasi Password</label><input type="password" placeholder="Konfirmasi Password">
    </p>
</fieldset>
<fieldset class="row2">
    <legend>Biodata Pengguna</legend>
    <p>
        <label>Nama Lengkap</label><input type="text" class="panjang" placeholder="Nama Lengkap" name="nama">
    </p>
    <p>
        <label>Nomor Telepon</label><input type="text" maxlength="12" name="telepon">
    </p>
    <p>
        <label> Alamat </label>
        <textarea cols="32" rows="5" placeholder="Alamat" name="alamat"></textarea>
    </p>
</fieldset>
<fieldset class="row3">
    <legend>Biodata Lain</legend>
    <p>
    <label>Jenis Kelamin</label>
    <input type="radio" value="Pria" name="Pria">
    <label class="JK">Pria</label>
    <input type="radio" value="Wanita" name="Wanita">
    <label class="JK">Wanita</label>
    </p>
    <p>
    <label>Tempat Lahir</label>
    <input class="panjangkota" type="text" maxlength="20" name="tempatlahir" />
    </p>
    <p>
    <label>Tanggal Lahir</label>
    <input type="date" size="2" maxlength="2" name="tanggal" />
    </p>
    <p>
        <label>Hobby</label>
        <input type="checkbox" value="Browsing" name="Browsing">
        <label class="hobby">Browsing</label>
        <input type="checkbox" value="Membaca" name="Membaca">
        <label class="hobby">Membaca</label>
    </p>
    <p>
        <label> </label>    
        <input type="checkbox" value="Sepakbola" name="Sepakbola">
        <label class="hobby">Sepakbola</label>
        <input type="checkbox" value="Galau" name="Galau">
        <label class="hobby">Galau</label>
    </p>
</fieldset>
<div><input type="button" value="kirim" onclick="daftar()"></div>
<tr>
<div><input type="reset" value="ulang"></div>
</form>
<!--Output-->
<hr>
<form class="daftar2">
<h1>OUTPUT</h1>
<fieldset class="row4">
    <legend>Pendaftaran Akun</legend>
    <p>
        <label>Nama Depan :</label><input type="text" name="znama">
    </p>
    <p>
        <label>Nomor Telepon :</label><input type="text" name="ztelepon">
    </p>
    <p> 
        <label>Email :</label><input type="text" name="zemail">
    </p>
    <p> 
        <label>Jenis Kelamin :</label><input type="text" name="zJK">
    </p>
    <p> 
        <label>Tempat Lahir :</label><input type="text" name="ztempatlahir">
    </p>
    <p> 
        <label>Tanggal Lahir :</label><input type="text">
    </p>
    <p> 
        <label>Hobby :</label><input type="text" name="zHobby">
    </p>
    <p> 
        <label>Alamat :</label><textarea cols="32" rows="5" zalamat></textarea>
    </p>
</fieldset> 
</form>
</body>
</html>

我想用一个javascript函数将输入表单中的所有项目（特别是文本和收音机/复选框对象，不看日期对象）打印到输出表单，当我尝试提交所有项目时，它没有显示在输出表单上。代码有什么问题？如何将所有代码打印到输出表单？请帮帮我，这是我的拼贴作业。（如果需要，可以复制并粘贴该代码以测试该代码）

对于这个问题，为什么不使用angular js？这很简单，兄弟

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">

<p>Input something in the input box:</p>
Name:<input type="text" name="name" ng-model="name"><br>

<p>Gender: <input type="radio" ng-model="gen" value="male" name="gen">Male
<input type="radio" ng-model="gen" value="female" name="gen">Female</p>




<p ng-bind="name"></p>

<p ng-bind="gen"></p>

</div>

</body>
</html>


在输入框中输入一些内容：
名称：

性别:男
女性

从以下位置了解更多Angularjs:）

尝试在每个表单上输入一条信息，注释掉所有其他内容，然后从那里开始。在基本按钮工作之前，无需将事情过于复杂化。如果你想得到答案，请非常清楚和具体地说明你的问题是什么。我们不会回答“我的代码有什么问题”的问题。表明你已经尝试过这个问题，这样我们就可以更好地了解你的思维过程。

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">

<p>Input something in the input box:</p>
Name:<input type="text" name="name" ng-model="name"><br>

<p>Gender: <input type="radio" ng-model="gen" value="male" name="gen">Male
<input type="radio" ng-model="gen" value="female" name="gen">Female</p>




<p ng-bind="name"></p>

<p ng-bind="gen"></p>

</div>

</body>
</html>